Text input height in input groups not adjusted properly when input-group-text height is increased
Created by: catchmyfame
I'm not sure if this is a bug or intended, but if you increase the font size or height of the input-group-text
in an input group, the associated input field doesn't adjust its height properly.
Sample input group (takes from https://getbootstrap.com/docs/4.3/components/input-group/):
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
Increase the font size on the input-group-text
element:
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size: 2em">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
A simple solution is to add height: auto;
to the input field which produces what I would think is the desired result:
When browsing the docs I noticed that in the 4.0.0 version that changing the font size or height of the input-group-text
element didn't have this issue, but it does on the 4x releases going forward.