Force Bootstrap dropdown menu to always display at the bottom and allow it go offscreen

Question

When there is no room at the bottom of the viewport to fit dropdown menu, it is displayed at the top of its dropdown button. Is it possible alter this behavior and make dropdown

Answer 1

I wanted to tackle this problem with CSS alone.

Bootstrap's dropdown's uses Popper.js for the positioning of the dropdown menu. This makes the task challenging since Popper.js seems to check and evaluate the position of the dropdown when the window is scrolled so I needed to use an !important rule to override Popper.js.

Here's the code I came up with, based on your example.

.dropdown-menu{
    transform: translate3d(5px, 35px, 0px)!important;
}

Example codepen: https://codepen.io/Washable/pen/xPdqVp

This will always force the dropdown to be below the button, even if the button is at the bottom of the screen.