CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
cgdeveloper
cgdeveloper

Reputation: 49

Button dropdowns in place of select

I'm wondering if there is any way to use Twitter Bootstrap's button dropdowns to replace select boxes in a form. The button dropdowns are so much more elegant and easier for users on mobile devices than the standard select box and I'd love to be able to harness that in a form so that the button dropdown input is passed on form submit.

Upvotes: 1

Views: 72

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362360

There a 2 nice plugins for this purpose..

One is Bootstrap Select2 (http://ivaynberg.github.io/select2/)

Demo: http://bootply.com/63744

The other one is bootstrap-select (https://github.com/silviomoreto/bootstrap-select):

Demo: http://bootply.com/88082

Upvotes: 1

JM Huret
JM Huret

Reputation: 361

I recently did something along these lines in a project using angular. The results were actually pretty good as the intended device was an iphone and the new ios7 select is not well loved. There is some custom styling involved in this snippet, but you can get the idea.

<div class="dropdown type">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="typeSelectionBox">{{report.type}}</span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a ng-click="setType('Finance')">Finance</a></li>
    <li><a ng-click="setType('Accounting')">Accounting</a></li>
    <li><a ng-click="setType('Marketing')">Marketing</a></li>
  </ul>
</div>

And then on the controller I just have a method that sets the type when the item is clicked. This avoided the use of the select box component

Upvotes: 0

Related Questions