CODEWITHSUNDEEP
twitter-bootstrapdrop-down-menuword-wrap
schabluk
schabluk

Reputation: 708

Bootstrap dropdown-menu items wraps

My drop-down list breaks items with long text:

Item wraps

I need it to be in one line, with text and icon pulled left, and label pulled righ. Here is HTML code:

<ul class="dropdown-menu">
  <li>
    <a class="clearfix" href="/">
      <div class="pull-left">
        <i class="glyphicon glyphicon-tag"></i>
        <span>&nbsp;&nbsp;Ticket issues&nbsp;</span>
      </div>
      <span class="label label-warning pull-right">5</span>
    </a>
  </li>
</ul>

Please help.

Upvotes: 1

Views: 3700

Answers (2)

Hlaledi
Hlaledi

Reputation: 11

Try the following in your css;

.wrapOptions {
  overflow: auto;
  min-width: 700px;
}

Upvotes: 1

Davide Casiraghi
Davide Casiraghi

Reputation: 18087

Even if the question is quite old I want to answer since I had a similar experience. You need to include the following in your css to override the white-space dropdown-items property:

.dropdown-menu a.dropdown-item{
  white-space: nowrap; 
}

Using this property the text will never wrap to the next line. The text continues on the same line until a br tag is encountered.

Upvotes: 4

Related Questions