Search code examples
bootstrap-4dropdown

Is there a way to set when the bootstrap dropdown should turn into a dropup?

The bootstrap 4 dropdown remains a dropdown until there is not enough space at the bottom of the browser window, then it changes to a dropup. Is there some way to make this happen when it's, say, 150px from the bottom rather than when it's at the bottom of the browser window?

Solution

  • It would be tricky to modify or add JavaScript for this. And it's unnecessary, because a simple hack to accomplish this is to add margin-bottom to the .dropdown-menu.show (don't forget to include .show in order to override the CSS).

    For example, margin-bottom: 150px, preferably not inline. Then the menu will anticipate 150px to change from dropdown to dropup.

    You will then have to remove the margin when the dropup is active:

    .dropdown-menu.show[x-placement="top-start"] {
    margin-bottom: 0;
}