CODEWITHSUNDEEP
htmlcssfirefoxtwitter-bootstrap
lucas clemente
lucas clemente

Reputation: 6389

Bootstrap dropdown caret not showing in Firefox

I want to show a caret on the right side of a bootstrap dropdown button within a button-group.

My code is (see also this fiddle):

<div class="span3 well">
    <div class="btn-group btn-block">
        <a class="btn btn-primary dropdown-toggle btn-block" data-toggle="dropdown" href="#">
        New &hellip; <i class="caret pull-right"></i>
      </a>
      <ul class="dropdown-menu">
          <li>1</li>
          <li>2</li>
      </ul>
    </div>
</div>

and

.btn-group .dropdown-toggle {
  padding-left: 10px;
  padding-right: 10px;
}

In webkit (Safari & Chrome) it looks as intended:

webkit

However Firefox does not work:

gecko

Did I make a mistake here? Which behavior is correct? What should I do to make it work everywhere?

​

Upvotes: 2

Views: 10866

Answers (1)

Jared Farrish
Jared Farrish

Reputation: 49188

The btn-group was causing the problem:

.btn-block .dropdown-toggle {
  padding-left: 10px;
  padding-right: 10px;
}

<div class="span3 well">
  <div class="btn-block"> <!-- <<< Right here is where I removed btn-group -->
    <a class="btn btn-primary dropdown-toggle btn-block" data-toggle="dropdown" href="#">
      New &hellip; <i class="caret pull-right"></i>
    </a>
    <ul class="dropdown-menu">
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</div>

http://jsfiddle.net/userdude/KdUdS/12/

It looks the same in Chrome as it does in Firefox.

EDIT

Here's the problem:

.btn-group {
    font-size: 0;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;    // <<< This here
}

That's on line 3438 of bootstrap.css. I fixed it with:

<div class="btn-block btn-group" style="white-space: normal;">

http://jsfiddle.net/userdude/KdUdS/14/

Now the dropdown elements don't look so hot, but I assume you know that are going to fix that.

Upvotes: 2

Related Questions