Button group height not matching input

Question

I have an bootstrap input group and my button to the right of my input does not match in height. I have reviewed the examples on getbootstrap and I don't see what I am doing wrong. How can I get my button height to match my text input? Below is the html I am using and a screen shot showing the height difference. I get the same result on firefox 33.1 and chrome 38.

<div class="col-xs-12 col-sm-8 text-left id-form-data">
<form id="partsearch" method="GET" action="">
<div class="input-group" style="width:200px;">
<input type="text" class="form-control" name="partNumber" id="partNumber" placeholder="Part#" maxlength="12" required>
<span class="input-group-btn">
<button type="submit" class="btn btn-success">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</span>
</div>
</form>
</div>

enter image description here

It works fine in the latest Bootstrap. Upgrade to 3.3.1 – Christina Nov 20 '14 at 16:49 — Christina, Nov 20 '14 at 16:49
Thanks for response. I am using 3.3.1. – user3720435 Nov 20 '14 at 17:11 — user3720435, Nov 20 '14 at 17:11

score 1 · Answer 1 · answered Nov 20 '14 at 17:12

1

By adding nbsp; next to my glyph, it solved my problem.

<button type="submit" class="btn btn-success">
&nbsp;<span class="glyphicon glyphicon-chevron-right"></span>
</button>

answered Nov 20 '14 at 17:12

user3720435

1,421
1
17
27

score 0 · Answer 2 · answered May 23 '17 at 18:15

The other answer inserts space. Use a completely invisible character instead: &zwnj;. This has the same effect:

<button type="submit" class="btn btn-success">
&zwnj;<span class="glyphicon glyphicon-chevron-right"></span>
</button>

Read more about it here Invisible Delimiter for Strings in HTML

Button group height not matching input

2 Answers2