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

Bootstrap

Avatar of undefined
Last Comment
wee11

8/22/2022 - Mon
lenamtl

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

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

Could you provide a screen shot of the problem?
Your help has saved me hundreds of hours of internet surfing.
fblack61
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
wee11

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question