css - Imitate Select Behavior with Button in Bootstrap -


i working on app uses bootstrap 3. have drop down list defined this:

<select id="options" class="form-control">   <option>go home</option>   <option>go left</option>   <option>go up</option>   <option>go right</option>   <option>go down</option> </select> 

i behavior of drop down list because when choose option, text shown. fact drop down stretches fill available space. however, want dividers bootstrap's button drop downs provides. in effort best of both worlds, i've attempted following:

<div class="btn-group">   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">     go home... <span class="caret"></span>   </button>   <ul class="dropdown-menu" role="menu">     <li><a href="#">go home</a></li>     <li class="divider"></li>     <li><a href="#">go left</a></li>     <li><a href="#">go up</a></li>     <li><a href="#">go right</a></li>     <li><a href="#">go down</a></li>   </ul> </div> 

when choose option, text not updated though. in addition, drop down not stretch fill available space.

you can use btn-block class make buttons , dropdown fill width..

   <div class="btn-group btn-block">               <button type="button" class="btn btn-block btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">                         go home... <span class="caret"></span>               </button>               <ul class="dropdown-menu btn-block" role="menu">                     <li><a href="#">go home</a></li>                     <li class="divider"></li>                     <li><a href="#">go left</a></li>                     <li><a href="#">go up</a></li>                     <li><a href="#">go right</a></li>                     <li><a href="#">go down</a></li>               </ul>    </div> 

the way dropdown behave select control using javascript and/or jquery this..

$(".dropdown-menu li a").click(function(){   var seltext = $(this).text();   $(this).parents('.btn-group').find('.dropdown-toggle').html(seltext+' <span class="caret"></span>'); }); 

demo: http://codeply.com/go/ki7aaetweo


Comments

Popular posts from this blog

jquery - How do you format the date used in the popover widget title of FullCalendar? -

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -