3

Wanted Outcome:

Prevent boostrap from adding dropup class to the dropdown toggle element

Depending where you are on the page (as in the dropdown has more "space" below it than it does above), the dropdown's options either display below or above the actual select. I looked at the bootstrap documentation, and only came across this:

Bootstrap Dropdown

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

Then for up:

Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup to the parent.

The wrapper however, didn't have any of these 2 classes at all. Therefore, I added the dropdown class to the wrapper:

enter image description here

You can see that there is more space on the bottom of the page than the top still.

enter image description here

However, when scrolling up on the page (with the class dropdown added to the wrapper), bootstrap is automatically adding the dropup class:

enter image description here

I can override with CSS/jQ most likely, but I didn't know if there was anything I was missing as far as default boostrap classes or data attributes that need to be assigned to the wrapper and/or dropdown toggle element itself.

Improve this question

3 Answers 3

Reset to default
3

2020 update, for future searchers. To avoid or prevent your dropdown from auto adding the dropup or any other auto flipping classes, you can do this.

You can add a data-flip attribute to your dropdown-toggle element with a value of false.

This is for Bootstrap 4 though, have not tried on other versions.

Example:

<a href='#' class='dropdown-toggle' role="button" id="dropdownMenuLink" data-toggle='dropdown' aria-haspopup='true' aria-expanded='false' data-flip='false'>BUTTON</a>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

After doing some research (for Bootstrap 3), all the select elements were using selectpicker(), and to force these select elements to always "drop down", the following is needed:

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

Improve this answer

Comments

-1

Sorry I'm late to the party @Rob. Yes, selectpicker() is part of the Bootstrap-Select

If you are not familiar with this check it out. It has lots of functionality that is missing in Bootstrap.

Note: if you see the class 'selectpicker' you are dealing with Bootstrap-Select

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.