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-14 20:22:08Z

53

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, 2017 at 20:22

answered Dec 10, 2013 at 19:25

caseyjhol

3,9783 gold badges21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Doug Wolfgram Over a year ago

Except you don't want quotes around 'false'. It needs to be boolean. :)

Graham Hesketh Over a year ago

I tried all these and still cannot stop it from dropping up and when it drops up it is hidden behind the navbar.

caseyjhol Over a year ago

@GrahamHesketh What version are you using?

Graham Hesketh Over a year ago

v1.13.0 I need it to be compatible with bootstrap 4

Matěj Kříž Over a year ago

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 in documentation.

|

Anthony_Z · Accepted Answer · 2013-11-12 16:41:13Z

2

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

dropupAuto: false,

answered Nov 12, 2013 at 16:41

Anthony_Z

7251 gold badge9 silver badges22 bronze badges

Comments

i k o n g · Accepted Answer · 2017-05-02 07:45:20Z

-1

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

answered May 2, 2017 at 7:45

i k o n g

11

1 Comment

Pieter Over a year ago

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.

Collectives™ on Stack Overflow

Disable dropup feature using Bootstrap Select

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related