CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
user3720435
user3720435

Reputation: 1476

Button group height not matching input

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

Upvotes: 2

Views: 1198

Answers (2)

Thomas Wagenaar
Thomas Wagenaar

Reputation: 6749

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

Upvotes: 0

user3720435
user3720435

Reputation: 1476

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>

Upvotes: 1

Related Questions