Merge pull request harvesthq#1820 from koenpunt/option-word-wrap

Wrap text for options in multiselect

sass/chosen.scss

@@ -147,6 +147,7 @@ $chosen-sprite-retina: image-url('[email protected]') !default;
     padding: 5px 6px;
     list-style: none;
     line-height: 15px;
+    word-wrap: break-word;
     -webkit-touch-callout: none;
     &.active-result {
       display: list-item;
@@ -190,7 +191,7 @@ $chosen-sprite-retina: image-url('[email protected]') !default;
     overflow: hidden;
     @include box-sizing(border-box);
     margin: 0;
-    padding: 0;
+    padding: 0 5px;
     width: 100%;
     height: auto !important;
     height: 1%;
@@ -208,7 +209,7 @@ $chosen-sprite-retina: image-url('[email protected]') !default;
       white-space: nowrap;
       input[type="text"] {
         margin: 1px 0;
-        padding: 5px;
+        padding: 5px 0;
         height: 15px;
         outline: 0;
         border: 0 !important;
@@ -223,17 +224,24 @@ $chosen-sprite-retina: image-url('[email protected]') !default;
     }
     &.search-choice {
       position: relative;
-      margin: 3px 0 3px 5px;
+      margin: 3px 5px 3px 0;
       padding: 3px 20px 3px 5px;
       border: 1px solid #aaa;
+      max-width: 100%;
+      @include box-sizing(border-box);
       border-radius: 3px;
-      background-color: #e4e4e4;
+      background-color: #eeeeee;
       @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%));
+      background-size: 100% 19px;
+      background-repeat: repeat-x;
       background-clip: padding-box;
       box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(#000,.05);
       color: #333;
       line-height: 13px;
       cursor: default;
+      span {
+        word-wrap: break-word;
+      }
       .search-choice-close {
         position: absolute;
         top: 4px;