CODEWITHSUNDEEP
csstwitter-bootstrap
Roger
Roger

Reputation: 4797

Bootstrap button group gets button height wrong

I'm using the Bootstrap btn-group class to implement a menu. The menu uses the class btn-large to display large buttons. During page generation a Python script checks each button against the page that is generated. If the button represents the current page it adds an icon in front of the label. Nothing complicated:

{% for page in pages %}
        <a id="{{ page.name|slugify }}" class="btn btn-large btn-success" href="{{ page.url }}" >
        {% if page.name == current_page.name %}
            <i class="icon-ok icon-white"></i>
        {% endif %}
        {{ page.name }}
        </a>
{% endfor %}

However, I noticed that the button which has the icon in its label is actually rendered one pixel bigger than the other buttons in the group (check the top of the checked button in the image below). This only happens when using btn-large; other sizes display correctly.

enter image description here

The above is done with Chrome 27 on Mac OS X; Safari renders correctly while Firefox has the same problem but renders the button bigger at the bottom. Bootstrap version 2.3.1

My question: is this easily fixable?

Upvotes: 2

Views: 1543

Answers (1)

Warai Otoko
Warai Otoko

Reputation: 285

Did you tried putting max-height for you btn-large class?

Upvotes: 2

Related Questions