CODEWITHSUNDEEP
htmltwitter-bootstrapbootstrap-4
Mick
Mick

Reputation: 13

Getting left of my input fields all the same size

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

Upvotes: 0

Views: 165

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362380

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

Upvotes: 2

Related Questions