Edgar Navasardyan Edgar Navasardyan - 3 months ago 6
CSS Question

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>

Answer

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

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