Fix Selectize input width

Author: tkrotoff

dist/select.css

@@ -1,3 +1,14 @@
+/* Style when highlighting a search. */
 .ui-select-highlight {
   font-weight: bold;
 }
+
+/* Fix input width for Selectize theme */
+.selectize-control > .selectize-input > input {
+  width: 100%;
+}
+
+/* Fix dropdown width for Selectize theme */
+.selectize-control > .selectize-dropdown {
+  width: 100%;
+}

examples/demo.html

@@ -44,8 +44,7 @@
       color: #333;
     }
 
-    .selectize-dropdown {
-      width: 100%;
+    .selectize-control > .selectize-dropdown {
       top: 36px;
     }
   </style>
@@ -58,19 +57,19 @@
 
   <p>Select2 theme (default):</p>
   <ui-select ng-model="person.selected" style="width: 300px;">
-    <match placeholder="Pick one...">{{$select.selected.name}}</match>
+    <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
     <choices data="people | filter: $select.search">
       <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
-      <div>{{item.email}}</div>
+      <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
     </choices>
   </ui-select>
 
   <p>Selectize theme:</p>
   <ui-select ng-model="person.selected" theme="selectize" style="width: 300px;">
-    <match placeholder="Pick one...">{{$select.selected.name}}</match>
+    <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
     <choices data="people | filter: $select.search">
       <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
-      <div>{{item.email}}</div>
+      <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
     </choices>
   </ui-select>
 </body>

examples/select2-bootstrap3.html

@@ -28,8 +28,7 @@
 
   <!--
     Select2 theme
-    Bootstrap 3 theme from http://fk.github.io/select2-bootstrap-css/
-    GitHub project: https://github.com/fk/select2-bootstrap-css
+    Bootstrap 3 theme from https://github.com/fk/select2-bootstrap-css
   -->
   <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
   <link rel="stylesheet" href="http://fk.github.io/select2-bootstrap-css/css/select2-bootstrap.css">
@@ -55,7 +54,7 @@
         <div class="col-sm-6">
 
           <ui-select ng-model="person.selected" theme="select2" class="form-control">
-            <match placeholder="Pick one...">{{$select.selected.name}}</match>
+            <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
             <choices data="people | filter: $select.search">
               <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
               <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
@@ -71,7 +70,7 @@
           <div class="input-group select2-bootstrap-append">
 
             <ui-select ng-model="person.selected" theme="select2" class="form-control">
-              <match placeholder="Pick one...">{{$select.selected.name}}</match>
+              <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
               <choices data="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>

examples/selectize-bootstrap3.html

@@ -37,20 +37,16 @@
       padding: 15px;
     }
 
-    .selectize-dropdown {
-      width: 100%;
-      top: 34px;
-    }
-
     .selectize-control {
-      /* Selectize is positionned too high */
+      /* Align Selectize with input-group-btn */
       top: 2px;
     }
 
-    /**
-     * Reset right rounded corners
-     * See Bootstrap input-groups.less
-     */
+    .selectize-control > .selectize-dropdown {
+      top: 34px;
+    }
+
+    /* Reset right rounded corners, see Bootstrap input-groups.less */
     .input-group > .selectize-control > .selectize-input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
@@ -73,7 +69,7 @@
         <div class="col-sm-6">
 
           <ui-select ng-model="person.selected" theme="selectize">
-            <match placeholder="Pick one...">{{$select.selected.name}}</match>
+            <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
             <choices data="people | filter: $select.search">
               <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
               <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
@@ -89,7 +85,7 @@
           <div class="input-group">
 
             <ui-select ng-model="person.selected" theme="selectize">
-              <match placeholder="Pick one...">{{$select.selected.name}}</match>
+              <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
               <choices data="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>

src/select.css

@@ -1,3 +1,14 @@
+/* Style when highlighting a search. */
 .ui-select-highlight {
   font-weight: bold;
 }
+
+/* Fix input width for Selectize theme */
+.selectize-control > .selectize-input > input {
+  width: 100%;
+}
+
+/* Fix dropdown width for Selectize theme */
+.selectize-control > .selectize-dropdown {
+  width: 100%;
+}