Improve Bootstrap theme

Author: tkrotoff

examples/bootstrap.html

@@ -20,12 +20,12 @@
 
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
 
+  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
+
   <!-- ui-select files -->
   <script src="../dist/select.js"></script>
   <link rel="stylesheet" href="../dist/select.css">
 
-  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
-
   <style>
     body {
       padding: 15px;
@@ -73,6 +73,29 @@
         </div>
       </div>
 
+      <div class="form-group">
+        <label class="col-sm-3 control-label">With a clear button</label>
+        <div class="col-sm-6">
+          <div class="input-group">
+
+            <ui-select ng-model="person.selected" theme="bootstrap">
+              <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
+              <choices repeat="item in people | filter: $select.search">
+                <span ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></span>
+                <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
+              </choices>
+            </ui-select>
+
+            <span class="input-group-btn">
+              <button ng-click="person.selected = undefined" class="btn btn-default">
+                <span class="glyphicon glyphicon-trash"></span>
+              </button>
+            </span>
+
+          </div>
+        </div>
+      </div>
+
       <div class="form-group">
         <label class="col-sm-3 control-label">Disabled</label>
         <div class="col-sm-6">

src/bootstrap/choices.tpl.html

@@ -1,4 +1,5 @@
-<ul class="ui-select-choices ui-select-choices-content dropdown-menu" role="menu" aria-labelledby="dLabel">
+<ul class="ui-select-choices ui-select-choices-content dropdown-menu"
+    role="menu" aria-labelledby="dLabel">
   <li class="ui-select-choices-row" ng-class="{active: $select.activeIdx == $index}">
     <a href="javascript:void(0)" ng-transclude></a>
   </li>

src/bootstrap/match.tpl.html

@@ -1,8 +1,8 @@
-<a class="btn btn-default ui-select-match"
-   ng-hide="$select.open"
-   ng-disabled="$select.disabled"
-   ng-click="$select.activate()">
+<button class="btn btn-default form-control ui-select-match"
+        ng-hide="$select.open"
+        ng-disabled="$select.disabled"
+        ng-click="$select.activate()">
   <span ng-hide="$select.selected !== undefined" class="text-muted">{{$select.placeholder}}</span>
   <span ng-show="$select.selected !== undefined" ng-transclude></span>
   <span class="caret"></span>
-</a>
+</button>

src/bootstrap/select.tpl.html

@@ -1,4 +1,4 @@
-<div class="dropdown" ng-class="{open: $select.open}">
+<div class="ui-select-bootstrap dropdown" ng-class="{open: $select.open}">
   <div class="ui-select-match"></div>
   <input type="text" autocomplete="off" tabindex=""
          class="form-control ui-select-search"

src/select.css

@@ -3,6 +3,12 @@
   font-weight: bold;
 }
 
+
+/* Select2 theme */
+
+
+/* Selectize theme */
+
 /* Fix input width for Selectize theme */
 .selectize-control > .selectize-input > input {
   width: 100%;
@@ -12,3 +18,33 @@
 .selectize-control > .selectize-dropdown {
   width: 100%;
 }
+
+
+/* Bootstrap theme */
+
+/* Fix Bootstrap dropdown position when inside a input-group */
+.input-group > .ui-select-bootstrap.dropdown {
+  /* Instead of relative */
+  position: static;
+}
+
+.input-group > .ui-select-bootstrap > .ui-select-search.form-control {
+  border-radius: 4px;  /* FIXME hardcoded value :-/ */
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.ui-select-bootstrap > .ui-select-match {
+  /* Instead of center because of .btn */
+  text-align: left;
+}
+
+.ui-select-bootstrap > .ui-select-match > .caret {
+  top: 45%;
+  position: absolute;
+  right: 17px;
+}
+
+.ui-select-bootstrap > .ui-select-choices {
+  width: 100%;
+}