Bootstrap 3 dropdown toggle is adding 'dropup' class on page scroll

Question

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:

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

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

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.

Answer 1

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>