Disable dropup feature using Bootstrap Select

Question

I'm using Bootstrap Select to style some select fields inside an accordion. Bootstrap select has a feature where it will make your dropdown dropup if it is near the bottom of the screen.

In this case I do not want it to drop up but I can't find where to disable this.

Bootstrap select: https://developer.snapappointments.com/bootstrap-select/

caseyjhol · Accepted Answer · 2017-06-14T20:22:08.470

52

Options can be passed via JavaScript or data attributes:

$('.selectpicker').selectpicker({
    dropupAuto: false
});

or

<select class="selectpicker" data-dropup-auto="false">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

You can also set this globally:

$.fn.selectpicker.Constructor.DEFAULTS.dropupAuto = false;

edited Jun 14 '17 at 20:22

answered Dec 10 '13 at 19:25

caseyjhol

3,090
2
19
23

2

Except you don't want quotes around 'false'. It needs to be boolean. :) – Doug Wolfgram Aug 24 '14 at 18:27
I tried all these and still cannot stop it from dropping up and when it drops up it is hidden behind the navbar. – Graham Hesketh Aug 10 '18 at 10:24
@GrahamHesketh What version are you using? – caseyjhol Aug 10 '18 at 14:31
v1.13.0 I need it to be compatible with bootstrap 4 – Graham Hesketh Aug 11 '18 at 10:56
Where is camelCase in JS, there is dash and lowercase in `data-` attribute. So `dropupAuto` became `data-dropup-auto`, `selectedTextFormat` is `data-selected-text-format`... etc Good to know :) See [all options](https://developer.snapappointments.com/bootstrap-select/options/#core-options) in documentation. – Matěj Kříž Oct 25 '18 at 13:42
This doesn't seem to work in v1.13.10, anyone know why? – Studocwho Apr 22 '19 at 23:03
yea still not working – Deepesh Thapa Dec 13 '21 at 09:49

score 2 · Answer 2 · answered Nov 12 '13 at 16:41

2

This setting can be changed in the bootstrap-select.js file by editing the dropupAuto option to:

dropupAuto: false,

answered Nov 12 '13 at 16:41

Anthony_Z

725
1
9
22

score -1 · Answer 3 · answered May 02 '17 at 07:45

-1

You can use this to disable the picker. $('.selectpicker').prop('disabled', true);

answered May 02 '17 at 07:45

i k o n g

11

I think you misunderstood the question. The OP wants to stop the Bootstrap Select control from dropping upwards as opposed to downwards so that it always drops down, and never up. – Pieter May 23 '17 at 09:45

Disable dropup feature using Bootstrap Select

3 Answers3

Linked

Related