Bootstrap 4 Input Group Append issue

wee11
wee11 used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
lenamtl

Commented:
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.
wee11

Author

Commented:
No custom css.  The example should be 12 columns.  There is nothing else.
lenamtl

Commented:
Could you provide a screen shot of the problem?
wee11

Author

Commented:
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

Commented:
So turns out there is padding inside the input-group so added in <div class="input-group col-3 p-0" class="form-control"> the p-0.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial