AMBARI-18015. Visual search : Changing the input to textarea. (Dharmesh Makwana via oleewere)

19 files changed, 98 insertions, 56 deletions

diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/index.html b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/index.html
index 07642ce027..2d9ae01508 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/index.html
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/index.html
@@ -26,7 +26,7 @@
 		<link href="libs/other/font-awesome/css/font-awesome.css" rel="stylesheet">
 		<!-- <link href="libs/other/jquery-ui/css/jquery-ui-1.11.4.min.css" rel="stylesheet"> -->
 		<link rel="stylesheet" type="text/css" href="libs/other/jquery-ui/css/jquery-ui-bootstrap.css">
-		<link rel="stylesheet" type="text/css" href="styles/visualsearch.css">
+		<link rel="stylesheet" type="text/css" href="styles/custom/visualsearch.css">
 		<link rel="stylesheet" type="text/css" href="libs/bower/backgrid/css/backgrid.css">
 		<link rel="stylesheet" type="text/css" href="libs/bower/backgrid-columnmanager/Backgrid.ColumnManager.css">
 		<link rel="stylesheet" type="text/css" href="libs/bower/backgrid-paginator/css/backgrid-paginator.css">
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/.bower.json b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/.bower.json
index 51f799f5b4..51f799f5b4 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/.bower.json
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/.bower.json
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/models/search_facets.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/models/search_facets.js
index 394cecdf4d..394cecdf4d 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/models/search_facets.js
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/models/search_facets.js
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/models/search_query.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/models/search_query.js
index 819b8d2f1f..819b8d2f1f 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/models/search_query.js
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/models/search_query.js
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/templates/search_box.jst b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/templates/search_box.jst
index 137075f92d..137075f92d 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/templates/search_box.jst
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/templates/search_box.jst
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/templates/search_facet.jst b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/templates/search_facet.jst
index 80838d7570..80838d7570 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/templates/search_facet.jst
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/templates/search_facet.jst
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/templates/search_input.jst b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/templates/search_input.jst
index ba179701f7..ba179701f7 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/templates/search_input.jst
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/templates/search_input.jst
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/templates/templates.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/templates/templates.js
index 42c46d0092..42c46d0092 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/templates/templates.js
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/templates/templates.js
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/utils/backbone_extensions.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/utils/backbone_extensions.js
index de85fa939f..de85fa939f 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/utils/backbone_extensions.js
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/utils/backbone_extensions.js
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/utils/hotkeys.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/utils/hotkeys.js
index 64a292ac02..64a292ac02 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/utils/hotkeys.js
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/utils/hotkeys.js
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/utils/inflector.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/utils/inflector.js
index 8a1d08c067..8a1d08c067 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/utils/inflector.js
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/utils/inflector.js
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/utils/jquery_extensions.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/utils/jquery_extensions.js
index fb77de6abe..fb77de6abe 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/utils/jquery_extensions.js
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/utils/jquery_extensions.js
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/utils/search_parser.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/utils/search_parser.js
index a2fa37a136..a2fa37a136 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/utils/search_parser.js
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/utils/search_parser.js
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/views/search_box.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/views/search_box.js
index 2af7213d2e..2af7213d2e 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/views/search_box.js
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/views/search_box.js
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/views/search_facet.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/views/search_facet.js
index cb54414b97..cb54414b97 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/views/search_facet.js
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/views/search_facet.js
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/views/search_input.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/views/search_input.js
index 5292984b0c..5292984b0c 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/views/search_input.js
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/views/search_input.js
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/visualsearch.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/visualsearch.js
index 03e92970c5..c8fe317360 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/visualsearch/visualsearch.js
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/custom/visualsearch/visualsearch.js
@@ -1,3 +1,21 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
 // This is the annotated source code for
 // [VisualSearch.js](http://documentcloud.github.com/visualsearch/),
 // a rich search box for real data.
@@ -257,10 +275,10 @@ VS.ui.SearchBox = Backbone.View.extend({
     this.renderSearchInput();
     this.facetViews.push(view);
     this.$('.VS-search-inner').children().eq(position*2).after(view.render().el);
-
+    $('.search_input').children('textarea').css({'width':0,'height':0});
     view.calculateSize();
     _.defer(_.bind(view.calculateSize, view));
-
+    $('.search_facet_input_container').css({'width': ($('.search_facet').width() - ($('.category').width() + 10) )+'px'})
     return view;
   },
 
@@ -337,14 +355,14 @@ VS.ui.SearchBox = Backbone.View.extend({
   deselectAllFacets : function(e) {
     this.disableFacets();
 
-    if (this.$(e.target).is('.category,input')) {
+    if (this.$(e.target).is('.category,textarea')) {
       var el   = $(e.target).closest('.search_facet,.search_input');
       var view = _.detect(this.facetViews.concat(this.inputViews), function(v) {
         return v.el == el[0];
       });
       if (view.type == 'facet') {
         view.selectFacet();
-      } else if (view.type == 'input') {
+      } else if (view.type == 'textarea') {
         _.defer(function() {
           view.enableEdit(true);
         });
@@ -470,7 +488,7 @@ VS.ui.SearchBox = Backbone.View.extend({
       view.box.trigger('keydown');
     }
     _.defer(_.bind(function() {
-      if (!this.$('input:focus').length) {
+      if (!this.$('textarea:focus').length) {
         view.enableEdit(selectText);
       }
     }, this));
@@ -552,8 +570,8 @@ VS.ui.SearchFacet = Backbone.View.extend({
 
   events : {
     'click .category'           : 'selectFacet',
-    'keydown input'             : 'keydown',
-    'mousedown input'           : 'enableEdit',
+    'keydown textarea'             : 'keydown',
+    'mousedown textarea'           : 'enableEdit',
     'mouseover .VS-icon-cancel' : 'showDelete',
     'mouseout .VS-icon-cancel'  : 'hideDelete',
     'click .VS-icon-cancel'     : 'remove'
@@ -579,13 +597,12 @@ VS.ui.SearchFacet = Backbone.View.extend({
 
     this.setMode('not', 'editing');
     this.setMode('not', 'selected');
-    this.box = this.$('input');
+    this.box = this.$('textarea');
     this.box.val(this.model.label());
     this.box.bind('blur', this.deferDisableEdit);
     // Handle paste events with `propertychange`
-    this.box.bind('input propertychange', this.keydown);
+    this.box.bind('textarea propertychange', this.keydown);
     this.setupAutocomplete();
-
     return this;
   },
 
@@ -594,14 +611,14 @@ VS.ui.SearchFacet = Backbone.View.extend({
   // DOM to get the correct font-size.
   calculateSize : function() {
     this.box.autoGrowInput();
-    this.box.unbind('updated.autogrow');
+    //this.box.unbind('updated.autogrow');
     this.box.bind('updated.autogrow', _.bind(this.moveAutocomplete, this));
   },
 
   // Forces a recalculation of this facet's input field's value. Called when
   // the facet is focused, removed, or otherwise modified.
   resize : function(e) {
-    this.box.trigger('resize.autogrow', e);
+   // this.box.trigger('resize.autogrow', e);
   },
 
   // Watches the facet's input field to see if it matches the beginnings of
@@ -644,7 +661,6 @@ VS.ui.SearchFacet = Backbone.View.extend({
         });
       }, this)
     });
-
     this.box.autocomplete('widget').addClass('VS-interface');
   },
 
@@ -994,11 +1010,11 @@ VS.ui.SearchInput = Backbone.View.extend({
   className : 'search_input ui-menu',
 
   events : {
-    'keypress input'  : 'keypress',
-    'keydown input'   : 'keydown',
-    'keyup input'     : 'keyup',
-    'click input'     : 'maybeTripleClick',
-    'dblclick input'  : 'startTripleClickTimer'
+    'keypress textarea'  : 'keypress',
+    'keydown textarea'   : 'keydown',
+    'keyup textarea'     : 'keyup',
+    'click textarea'     : 'maybeTripleClick',
+    'dblclick textarea'  : 'startTripleClickTimer'
   },
 
   initialize : function(options) {
@@ -1020,7 +1036,7 @@ VS.ui.SearchInput = Backbone.View.extend({
 
     this.setMode('not', 'editing');
     this.setMode('not', 'selected');
-    this.box = this.$('input');
+    this.box = this.$('textarea');
     this.box.autoGrowInput();
     this.box.bind('updated.autogrow', this.moveAutocomplete);
     this.box.bind('blur',  this.deferDisableEdit);
@@ -1301,11 +1317,10 @@ VS.ui.SearchInput = Backbone.View.extend({
   // Callback fired on key press in the search box. We search when they hit return.
   keypress : function(e) {
     var key = VS.app.hotkeys.key(e);
-
     if (key == 'enter') {
       return this.search(e, 100);
     } else if (VS.app.hotkeys.colon(e)) {
-      this.box.trigger('resize.autogrow', e);
+     // this.box.trigger('resize.autogrow', e);
       var query    = this.box.val();
       var prefixes = [];
       this.app.options.callbacks.facetMatches(function(p) {
@@ -1394,7 +1409,7 @@ VS.ui.SearchInput = Backbone.View.extend({
   // We should get the value of an input should be done
   // on keyup since keydown gets the previous value and not the current one
   keyup : function(e) {
-    this.box.trigger('resize.autogrow', e);
+    //this.box.trigger('resize.autogrow', e);
   }
 
 });
@@ -1577,8 +1592,7 @@ $.fn.extend({
       // Watch for input value changes on all of these events. `resize`
       // event is called explicitly when the input has been changed without
       // a single keypress.
-      var events = 'keydown.autogrow keypress.autogrow ' +
-                   'resize.autogrow change.autogrow';
+      var events = {};
       $input.next('.VS-input-width-tester').remove();
       $input.after($tester);
       $input.unbind(events).bind(events, function(e, realEvent) {
@@ -1603,12 +1617,12 @@ $.fn.extend({
 
         $tester.html(value);
 
-        $input.width($tester.width() + 3 + parseInt($input.css('min-width')));
-        $input.trigger('updated.autogrow');
+        $input.width($tester.width() + 10 + parseInt($input.css('min-width')));
+        //$input.trigger('updated.autogrow');
       });
 
       // Sets the width of the input on initialization.
-      $input.trigger('resize.autogrow');
+      //$input.trigger('resize.autogrow');
     });
   },
 
@@ -1965,6 +1979,6 @@ VS.model.SearchQuery = Backbone.Collection.extend({
 window.JST = window.JST || {};
 
 window.JST['search_box'] = _.template('<div class="VS-search <% if (readOnly) { %>VS-readonly<% } %>">\n  <div class="VS-search-box-wrapper VS-search-box">\n    <div class="VS-icon VS-icon-search"></div>\n    <div class="VS-placeholder"></div>\n    <div class="VS-search-inner"></div>\n    <div class="VS-icon VS-icon-cancel VS-cancel-search-box" title="clear search"></div>\n  </div>\n</div>');
-window.JST['search_facet'] = _.template('<% if (model.has(\'category\')) { %>\n  <div class="category"><%= model.get(\'category\') %>:</div>\n<% } %>\n\n<div class="search_facet_input_container">\n  <input type="text" class="search_facet_input ui-menu VS-interface" value="" <% if (readOnly) { %>disabled="disabled"<% } %> />\n</div>\n\n<div class="search_facet_remove VS-icon VS-icon-cancel"></div>');
-window.JST['search_input'] = _.template('<input type="text" class="ui-menu" <% if (readOnly) { %>disabled="disabled"<% } %> />');
+window.JST['search_facet'] = _.template('<% if (model.has(\'category\')) { %>\n  <div class="category"><%= model.get(\'category\') %>:</div>\n<% } %>\n\n<div class="search_facet_input_container">\n  <textarea type="text" class="search_facet_input ui-menu VS-interface" value="" <% if (readOnly) { %>disabled="disabled"<% } %> />\n</div>\n\n<div class="search_facet_remove VS-icon VS-icon-cancel"></div>');
+window.JST['search_input'] = _.template('<textarea type="text" class="ui-menu" <% if (readOnly) { %>disabled="disabled"<% } %> />');
 })();
\ No newline at end of file
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/Init.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/Init.js
index ee8a7dd9dc..cc1612919d 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/Init.js
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/Init.js
@@ -204,7 +204,7 @@
          'bootbox': '../libs/bower/bootbox/js/bootbox.min',
          'moment': '../libs/bower/moment/js/moment.min',
          'moment-tz': '../libs/bower/moment/js/moment-timezone-with-data.min',
-         'visualsearch': '../libs/other/visualsearch/visualsearch',
+         'visualsearch': '../libs/other/custom/visualsearch/visualsearch',
          'globalize': '../libs/bower/globalize/lib/globalize',
          /*'handlebars from the require handlerbars plugin below */
          'handlebars': '../libs/bower/require-handlebars-plugin/js/Handlebars',
diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/styles/visualsearch.css b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/styles/custom/visualsearch.css
index 68f58ed0c3..43cb200c88 100644
--- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/styles/visualsearch.css
+++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/styles/custom/visualsearch.css
@@ -1,3 +1,21 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
 /*------------------------------ RESET + DEFAULT STYLES ---------------------------------*/
 
 /* 
@@ -38,7 +56,7 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   .VS-search .VS-icon-cancel {
     width: 11px; height: 11px;
     background-position: center 0;
-    background-image: url('../images/cancel_search.png');
+    background-image: url('../../images/cancel_search.png');
     cursor: pointer;
   }
     .VS-search .VS-icon-cancel:hover {
@@ -46,7 +64,7 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
     }
   .VS-search .VS-icon-search {
     width: 12px; height: 12px;
-    background-image: url('../images/search_glyph.png');
+    background-image: url('../../images/search_glyph.png');
   }
 
 /* ===================== */
@@ -58,7 +76,7 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   color: #373737;
   font-size: 12px;
 }
-.VS-search input {
+.VS-search textarea {
   display: block;
   border: none;
   -moz-box-shadow: none;
@@ -70,8 +88,9 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   font-size: 16px;
   line-height: 20px;
   width: 100%;
+  resize:none;
 }
-.VS-interface, .VS-search .dialog, .VS-search input {
+.VS-interface, .VS-search .dialog, .VS-search textarea {
   font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif !important;
   line-height: 1.1em;
 }
@@ -91,7 +110,8 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   -moz-box-shadow: inset 0px 0px 3px #ccc;
   box-shadow: inset 0px 0px 3px #ccc;
   min-height: 28px;
-  height: auto;
+  max-height: 140px;
+  overflow-y: auto;
 }
   .VS-search.VS-readonly .VS-search-box {
     cursor: default;
@@ -118,18 +138,19 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
     position: relative;
     margin: 0 20px 0 22px;
     overflow: hidden;
+    width: 96%;
   }
-  .VS-search input {
+  .VS-search textarea {
     width: 100px;
   }
-  .VS-search input,
+  .VS-search textarea,
   .VS-search .VS-input-width-tester {
     padding: 6px 0;
     float: left;
     color: #808080;
     font: 13px/17px Helvetica, Arial;
   }
-  .VS-search.VS-focus input {
+  .VS-search.VS-focus textarea {
     color: #606060;
   }
   .VS-search .VS-icon-search {
@@ -149,13 +170,14 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 /* ================ */
 
 .VS-search .search_facet {
-  float: left;
+   display: block;
   margin: 0;
   padding: 0 0 0 14px;
   position: relative;
   border: 1px solid transparent;
-  height: 20px;
+  min-height: 20px;
   margin: 3px -3px 3px 0;
+  width: 100%;
 }
   .VS-search.VS-readonly .search_facet {
     padding-left: 0;
@@ -178,9 +200,10 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
     font-size: 10px;
     color: #808080;
     padding: 8px 0 5px;
-    line-height: 13px;
+    line-height: 7px;
     cursor: pointer;
     padding: 4px 0 0;
+    min-width:7%;
   }
     .VS-search.VS-readonly .search_facet .category {
       cursor: default;
@@ -190,25 +213,29 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   }
   .VS-search .search_facet .search_facet_input_container {
     float: left;
+    max-width: 93%;
+    clear:right;
   }
-  .VS-search .search_facet input {
+  .VS-search .search_facet textarea {
     margin: 0;
     padding: 0;
     color: #000;
-    font-size: 13px;
-    line-height: 16px;
+    font-size: 10px;
+    line-height: 13px;
     padding: 5px 0 5px 4px;
-    height: 16px;
+    min-height: 13px;
     width: auto;
     z-index: 100;
     position: relative;
     padding-top: 1px;
-    padding-bottom: 2px;
+    padding-bottom: 0;
     padding-right: 3px;
-
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
   }
-  .VS-search .search_facet.is_editing input,
-  .VS-search .search_facet.is_selected input {
+  .VS-search .search_facet.is_editing textarea,
+  .VS-search .search_facet.is_selected textarea {
     color: #000;
   }
   .VS-search.VS-readonly .search_facet .search_facet_remove {
@@ -242,21 +269,22 @@ Source: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 /* ================ */
 
 .VS-search .search_input {
-  height: 28px;
-  float: left;
+  height: 7px;
+  display: block;
   margin-left: -1px;
 }
-  .VS-search .search_input input {
+  .VS-search .search_input textarea {
     padding: 6px 3px 6px 2px;
     line-height: 10px;
     height: 22px;
-    margin-top: -4px;
-    width: 10px;
+    margin-top: 2px;
+    font-size: 10px;
+    width: 90px;
     z-index: 100;
     min-width: 4px;
     position: relative;
   }
-  .VS-search .search_input.is_editing input {
+  .VS-search .search_input.is_editing textarea {
     color: #202020;
   }