Getting left of my input fields all the same size

Question

Hi I have a few input fields, they have a left and right side where the left is just a label and the right is the data.

However the left sides of the fields are all different sizes depending on the text in it. I want to have the width the same for all and the text aligned to the left.

Here is what I have:

 <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">hdsfkjdhf</span>
                  </div>
                  <input type="text" class="form-control" placeholder="Loading" value="{{person?.name}}" aria-label="Username" aria-describedby="basic-addon1">
                </div>

              <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">sdf</span>
                  </div>
                  <input type="text" class="form-control" placeholder="Loading" value="{{person?.age}}" aria-label="Age" aria-describedby="basic-addon1">
                </div>

                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">Other Stuff</span>
                  </div>
                  <input type="text" class="form-control" placeholder="Loading" value="{{person?.otherStuff}}" aria-label="Stuff" aria-describedby="basic-addon1">
                </div>

Also I am using bootstrap 4

Do they all have to be input-groups? Usually form label/inputs widths are controlled as explained in the docs. — Carol Skelly
– Carol Skelly, Commented Mar 22, 2018 at 19:30
It seems the input groups let me how the left and right together on the same line and connected — Mick
– Mick, Commented Mar 22, 2018 at 19:41

Carol Skelly · Accepted Answer · 2021-07-14 20:10:11Z

2

If you really want to use input-groups, you can add a little CSS to control the width of each .input-group-prepend...

https://codeply.com/go/wv5NMmTgwq

.input-group>.input-group-prepend {
    flex: 0 0 20%;
}
.input-group .input-group-text {
    width: 100%;
}

An alternate option is to use custom borders with form grid layout like this...

   <div class="form-group row border rounded">
            <label class="col-sm-2 col-form-label bg-light border-right border-bottom">Labelhere</label>
            <div class="col-sm-10 border-bottom">
                <input type="text" class="form-control border-0" id="input">
            </div>
   </div>

Demo of both options

edited Jul 14, 2021 at 20:10

answered Mar 22, 2018 at 19:44

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting left of my input fields all the same size

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related