Link to home
Start Free TrialLog in
Avatar of wee11
wee11

asked on

Bootstrap 4 Input Group Append issue

Using a form in-line class this scenario has two columns of label text inputs.  There are a few that have added input-group-appends with font awesome calendar or search icons.  For whatever reason those are shorter than the others.  Below is an example with two columns also original has six rows.  Also they are centered.  I could make the labels right justified by using justify-content-end but not the inputs.  It would be nice to left justify these because the gap between the label and the input would be smaller.

<form class="form-inline">
<div class="form-group row">
<label class="col-3 col-form-label justify-content-end">First Name:</label>
<div class="input-group col-3" class="form-control">
<input type="text" class"form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
</div>
<label class="col-3 col-form-label justify-content-end">Last Name:</label>
<div class="input-group col-3" class="form-control">
<input type="text" class"form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
</form>

Open in new window

Avatar of lenamtl
lenamtl
Flag of Canada image

Hi,

Are you using any custom css?

you should make sure that your total of column equal 12, not only for the form but overall into the template

justify-content-end can be use with a div i'm not sur it can be use with a label..


You can set a JSFiddle that will be easier to check with your custom css if any.
Avatar of wee11
wee11

ASKER

No custom css.  The example should be 12 columns.  There is nothing else.
Could you provide a screen shot of the problem?
Avatar of wee11

ASKER

So the issue looks like it is the append and its extending the width of the text box.  Text boxes without the button are exactly the width of the ones with the button but stop right at the start of the button.  Drop this in JSFiddle and you can see the issue.

<form class="form form">
<div class="form-group row">
<label class="col-3 col-form-label justify-content-end">First Name:</label>
<div class="input-group col-3" class="form-control">
<input type="text" class"form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label justify-content-end">Middle Name:</label>
<div class="input-group col-3" class="form-control">
<input type="text" class"form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-3 col-form-label justify-content-end">Last Name:</label>
<div class="input-group col-3" class="form-control">
<input type="text" class"form-control">
</div>
</div>
</form>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of wee11
wee11

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial