0

I'm trying to prevent Bootstrap's automatic drop up from occurring on smaller screen sizes.

The S.O. question here says to add to add the attribute data-dropup-auto and set it to false, however upon doing so it doesn't work. Inspecting the select drop down from the Chrome developer console also reveals the attribute to be present and correctly set to false.

Here is the code for my select in the form.

<%= f.select(:countries_id_eq, Country.order(:name).collect{|c| [c.name,c.id]}, {:prompt => "Exam Cycle"}, { :class => 'form-control input-lg', "data-dropup-auto" => "false" }) %>

In the developer console, the select renders like this

<select class="form-control input-lg" id="q_universities_id_eq" name="q[universities_id_eq]" data-dropup-auto="false"><option value="">Subjects</option>...</select>

Any help would be much appreciated.

Community
  • 1
  • 1
Conor
  • 3,279
  • 1
  • 21
  • 35

1 Answers1

1

As noted in the comment to this answer, you need to remove the quotes around the attribute value since it's boolean.

<%= f.select(:countries_id_eq, Country.order(:name).collect{|c| [c.name,c.id]}, {:prompt => "Exam Cycle"}, { :class => 'form-control input-lg', "data-dropup-auto" => false }) %>
Community
  • 1
  • 1
nicholas79171
  • 1,203
  • 2
  • 15
  • 28
  • Thanks for the answer Nicholas - I saw that comment as well and tried it but unfortunately it resulted in the same behaviour with the drop-downs becoming drop-ups on smaller screen sizes. – Conor Jul 20 '16 at 13:38
  • Have you tried editing the default value in the `bootstrap-select.js` file? For me it's on line 298. Setting that to false should do it. – nicholas79171 Jul 20 '16 at 13:42
  • I have, still the same behaviour unfortunately. – Conor Jul 20 '16 at 13:46
  • Have you tried adjusting the setting using JavaScript like in the answer I linked to? – nicholas79171 Jul 20 '16 at 13:53
  • I have - This however adds the bootstrap class of `select-picker` to my select element which alters the appearance of the element. It does however fix the issue. – Conor Jul 20 '16 at 13:58
  • That's the problem. `select-picker.js` looks for `select` items that are tagged with the class `select-picker`. Otherwise, it doesn't know which `select` tags you want to edit. Add `select-picker` to your `select` and it will solve your issue. You'll have to use more CSS or JS to fix the style changes. – nicholas79171 Jul 20 '16 at 14:05
  • Thanks Nicolas - I was thinking that myself but I thought there may have been a more elegant way to tackle this issue. I'll go with that though. If you post an answer I'll give you the green tick :) – Conor Jul 20 '16 at 14:11