Don't use bootstrap columns inside buttons

Author: Brian Feister

Diff for: src/bootstrap/match.tpl.html

@@ -1,12 +1,10 @@
-<div class="btn-group ui-select-match btn-block" ng-hide="$select.open" ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}">
-  <button type="button" class="btn btn-default" ng-class="{'col-sm-8 col-md-10': $select.allowClear && !$select.isEmpty(),'col-sm-10 col-md-11': !$select.allowClear || $select.isEmpty()}" tabindex="-1" ;="" ng-click="$select.activate()">
-    <span ng-show="$select.isEmpty()" class="text-muted">{{$select.placeholder}}</span>
-    <span ng-hide="$select.isEmpty()" ng-transclude=""></span>
+<div class="ui-select-match" ng-hide="$select.open" ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}">
+  <button type="button" class="btn btn-default btn-block ui-select-toggle" tabindex="-1" ;="" ng-disabled="$select.disabled" ng-click="$select.activate()">
+    <span ng-show="$select.isEmpty()" class="ui-select-placeholder text-muted">{{$select.placeholder}}</span>
+    <span ng-hide="$select.isEmpty()" class="ui-select-match-text" ng-class="{'ui-select-allow-clear': $select.allowClear && !$select.isEmpty()}" ng-transclude=""></span>
+    <i class="caret pull-right" ng-click="$select.toggle($event)"></i>
   </button>
-  <button class="btn btn-default col-sm-2 col-md-1" ng-if="$select.allowClear && !$select.isEmpty()" ng-click="$select.select(undefined)">
-    <span class="glyphicon glyphicon-remove ui-select-toggle"></span>
+  <button class="ui-select-clear" ng-if="$select.allowClear && !$select.isEmpty()" ng-click="$select.select(undefined)">
+    <i class="glyphicon glyphicon-remove"></i>
   </button>
-  <button class="btn btn-default col-sm-2 col-md-1" ng-click="$select.activate()">
-    <span class="caret ui-select-toggle" ng-click="$select.toggle($event)"></span>
-  </button>
-</div>
+</div>

Diff for: src/select.css

@@ -1,3 +1,11 @@
+/*!
+ * ui-select
+ * http://github.com/angular-ui/ui-select
+ * Version: 0.9.5 - 2014-12-12T16:07:20.859Z
+ * License: MIT
+ */
+
+
 /* Style when highlighting a search. */
 .ui-select-highlight {
   font-weight: bold;
@@ -72,6 +80,17 @@
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
 }
 
+.ui-select-bootstrap .ui-select-toggle {
+  position: relative;
+}
+
+.ui-select-bootstrap .ui-select-toggle > .caret {
+  position: absolute;
+  height: 100%;
+  top: 50%;
+  right: 10px;
+  margin-top: -2px;
+}
 
 /* Fix Bootstrap dropdown position when inside a input-group */
 .input-group > .ui-select-bootstrap.dropdown {