I've been working on a project where I need to ensure that the dropup-menu content is fully visible when the scroll bar is in use.
Currently, the dropup-menu content isn't displaying completely when scrolling up or down.
To enable the scrollbar, I have used the following CSS code:
.dropdowns
{
overflow-y:auto;
height: 100px;
}
To create the button, I have used the following HTML code:
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Below is a screenshot demonstrating the issue I am encountering:
https://i.sstatic.net/te1gX.png
As you can see from the screenshot, the dropup menu does not display the complete content. The "Action" text is missing.
Issue:
I am seeking advice on how to adjust the CSS code so that the entire dropup content is visible when scrolling up or down.
As shown in the screenshot, the dropup content gets cut off while scrolling.
Edit 1: I want to keep the scrollbar (which includes a list of buttons) at the bottom of the content.