Add custom flex-grow for the search form input.

projectblacklight · Mar 30, 2018 · 593da1c · 593da1c
1 parent c1d7532
commit 593da1c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
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,7 @@
+// bootstrap does flex-grow: 1 by default which makes the
+// text input roughly the same size as the select in many cases
+.input-group > .form-control {
+  &.search-q {
+    flex-grow: 3;
+  }
+}
diff --git a/app/views/catalog/_search_form.html.erb b/app/views/catalog/_search_form.html.erb
@@ -15,7 +15,7 @@
     <% end %>
 
     <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) }  %>
+    <%= 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">