1

I am using bootstrap 5 for a form I am making.

I have a file input element that looks like this on a computer screen:

enter image description here

But when I test it out for a mobile it looks like this:

enter image description here

Here's the code:

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="row justify-content-end mt-1">
  <label for="totalScore" class="col-2 me-4">Total score</label>
  <input type="text" name="totalScore" id="totalScore" class="col-1" value="0/27" readonly style="width:20%;" />
</div>
<div class="row justify-content-end mt-1">
  <label for="percent" class="col-2 me-4">Percentage achieved</label>
  <input type="text" name="percent" id="percent" class="col-1" value="0%" readonly style="width:20%;" />
</div>
<div class="row ms-3 mt-3 mb-3">
  <label for="comments" class="col-2 me-5">Comments /<br/> Observations</label>
  <textarea name="comments" id="comments" rows="1" class="col-5"></textarea>
</div>
<div class="row ms-3 mt-2 mb-2">
  <label for="checkedBy" class="col-2 me-5">Checked by</label>
  <input type="text" name="checkedBy" id="checkedBy" class="col-5" />
</div>
<div class="row ms-3 mt-2 mb-2">
  <label for="intakeQuantity" class="col-2 me-5">Intake Quantity</label>
  <input type="number" name="intakeQuantity" id="intakeQuantity" class="col-5" min="0" step="1" />
</div>
<div class="row ms-3 mt-2 mb-2">
  <label for="rejectedProduct" class="col-2 me-5">Rejected Product</label>
  <input type="number" name="rejectedProduct" id="rejectedProduct" class="col-5" min="0" step="1" />
</div>
<div class="row ms-3 mt-2 mb-2">
  <label for="processed" class="col-2 me-5">Processed</label>
  <input type="number" name="processed" id="processed" class="col-5" min="0" step="1" />
</div>
<div class="row ms-3 mt-2 mb-2 imput-group">
  <label for="photo" class="col-2 me-5">Upload Photo</label>
  <span class="input-group-text col-1">JPEG Only</span>
  <input type="file" name="photo" id="photo" class="form-control col-7" style="text-align:left;width:33.5%;height:100%;" accept="image/jpeg" />
</div>
<div class="row justify-content-center m-2">
  <input type="reset" value="Cancel" class="col-1" style="width:auto;" />
</div>
<div class="row justify-content-center m-2">
  <input type="submit" value="Submit" class="col-1" style="width:auto;" />
</div>

How would I go about preventing the span from shrinking?

tacoshy
  • 10,642
  • 5
  • 17
  • 34
thisdanguy
  • 13
  • 5
  • Hi and Welcome to SO! Please take the [tour]. The next time you ask a question, please include the pictures directly in the question. I now had to download the images from an external site and upload them. You could have uploaded the images directly yourself. If you provide code, please use the [repro] (`<>` button). Also tag the question with the correct tag not just any Bootstrap tag that differs from your description. – tacoshy Oct 16 '21 at 10:08
  • You can simply use `min-width: min-content` on the span. – Arkellys Oct 16 '21 at 10:10
  • @tacoshy I tried that but I didn't have enough reputation points so I had to link them. – thisdanguy Oct 16 '21 at 10:15

1 Answers1

0

try to add w-100 so that its width stay 100%

Leebogssy
  • 24
  • 2