CODEWITHSUNDEEP
csstwitter-bootstrap
Edgar Navasardyan
Edgar Navasardyan

Reputation: 4501

Setting dropdown menu width to auto

My question is best described by simple JSFiddle. All I want to do is to make my dropdown menu width be dependent on its content width so that all option labels are on single line without line breaks.

JSFiddle

<div>
  <span style='cursor:pointer; float:right'>
                                    <div class="btn-group pull-right">
                                        <button id = 'majic' type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <span class="glyphicon glyphicon-cog"></span>
  </button>
  <ul style = 'padding:10px' class="dropdown-menu">
    <li class="dropdown-submenu">
      <input id="full_package_filter" type="checkbox" name="vehicle" checked>С полным пакетом документов<span class='useful_stat'></span>
      <br>
      <input id="not_full_package_filter" type="checkbox" name="vehicle" checked>С неполным пакетом документов<span class='useful_stat'></span>
      <br>
    </li>
    <li class="dropdown-submenu"></li>
    <li class="dropdown-submenu"></li>
    <li class="dropdown-submenu"></li>
  </ul>
</div>
</span>
</div>

Upvotes: 1

Views: 4607

Answers (1)

Zoli Szab&#243;
Zoli Szab&#243;

Reputation: 4534

Try adding white-space: nowrap; rule to your dropdown menu.

.dropdown-submenu {
  white-space: nowrap;
}

Upvotes: 7

Related Questions