Gideon Gideon - 4 months ago 24
Javascript Question

Bootstrap 3's Split button caret height is smaller than the main button

I'm using Bootstrap 3's button with attached drop-up menu using this code:

<div class="btn-group dropup">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Remittance Summary</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Close Advice</a></li>
</ul>
</div>


But the caret is rendered smaller that the left button.

Remittance Summary.png

However, including text with the caret apparently removes the problem:

Remittance Summary.fixed.png

I'm wondering why does the caret not the same height with the left button? There is no
.css
loaded that overrides bootstrap's. And this button group is found at a modal-footer, if that helps.




I found the problem: The brower applies
auto
to the
height
of the caret button instead of applying the default
34px
. I wonder why?

Answer

Checking it's css property, its height is set to auto. It's grey-out thought so I cannot trace where it was set.

chrome-css.png

So I forced a property to it via:

button.btn.dropdown-toggle {
    height: 34px !important;
}
Comments