twitter-bootstrap

Demostrating issues #143 and #144 in bootstrap-select.

by Erik Bartlow

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css">
<script src="http://silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js"></script>
<link rel="stylesheet" href="http://silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css">
<div class="container">
  <h3>Dropdown List</h3>
  <div class="form-group">

    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

  <h3>
People Search
</h3>
  <nav class="navbar navbar-default">
    <div class="nav nav-justified navbar-nav">

      <form class="navbar-form navbar-search" role="search">
        <div class="input-group">

          <div class="input-group-btn">
            <button type="button" class="btn btn-search btn-default dropdown-toggle" data-toggle="dropdown">
              <span class="glyphicon glyphicon-search"></span>
              <span class="label-icon">Search</span>
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu pull-left" role="menu">
              <li>
                <a href="#">
                  <span class="glyphicon glyphicon-user"></span>
                  <span class="label-icon">Search By User</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span class="glyphicon glyphicon-book"></span>
                  <span class="label-icon">Search By Organization</span>
                </a>
              </li>
            </ul>
          </div>

          <input type="text" class="form-control">

          <div class="input-group-btn">
            <button type="button" class="btn btn-search btn-default">
              GO
            </button>


          </div>
     ...

CSS

.btn-group {
  z-index: 1051;
}

.navbar .navbar-search .dropdown-menu {
  min-width: 25px;
}

.dropdown-menu .label-icon {
  margin-left: 5px;
}

.btn-outline {
  background-color: transparent;
  color: inherit;
  transition: all .5s;
}

JavaScript

$('#myModal1 .selectpicker').selectpicker();
$(".input-group-btn .dropdown-menu li a").click(function() {

  var selText = $(this).html();

  //working version - for single button //
  //$('.btn:first-child').html(selText+'<span class="caret"></span>');  

  //working version - for multiple buttons //
  $(this).parents('.input-group-btn').find('.btn-search').html(selText);

});
//$(document).on('focusin.modal', '[data-toggle=dropdown], [role=menu]', function (e) { e.stopPropagation() });