Add custom flex-grow for the search form input.

projectblacklight · Mar 30, 2018 · 5df570f · 5df570f
1 parent c1d7532
commit 5df570f
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/app/assets/stylesheets/blacklight/_blacklight_base.scss b/app/assets/stylesheets/blacklight/_blacklight_base.scss
@@ -13,6 +13,7 @@
 @import "blacklight/header";
 @import "blacklight/constraints";
 @import "blacklight/controls";
+@import "blacklight/search_form";
 @import "blacklight/search_results";
 @import "blacklight/pagination";
 @import "blacklight/group";

diff --git a/app/assets/stylesheets/blacklight/_search_form.scss b/app/assets/stylesheets/blacklight/_search_form.scss
@@ -0,0 +1,5 @@
+// bootstrap does flex-grow: 1 by default which makes the
+// text input roughly the same size as the select in many cases
+.search_q {
+  flex-grow: 3 !important;
+}
diff --git a/app/views/catalog/_search_form.html.erb b/app/views/catalog/_search_form.html.erb
@@ -17,6 +17,7 @@
     <label for="q" class="sr-only"><%= t('blacklight.search.form.search.label') %></label>
     <%= text_field_tag :q, params[:q], placeholder: t('blacklight.search.form.search.placeholder'), class: "search_q q form-control", id: "q", autofocus: presenter.autofocus?, data: { autocomplete_enabled: presenter.autocomplete_enabled?, autocomplete_path: search_action_path(action: :suggest) }  %>
 
+
     <span class="input-group-append">
       <button type="submit" class="btn btn-primary search-btn" id="search">
         <span class="submit-search-text"><%= t('blacklight.search.form.submit') %></span>