Menu
Use overflow: auto . Scrollbars will only appear when needed. (Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto ).
Bootstrap 4.3 added new built-in scroll feature to modals. This makes only the modal-body content scroll if the size of the content would otherwise make the page scroll. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class.
To create a popover, you need to add the data-bs-toggle="popover" attribute to an element. Whereas, popover's title and its content that would display upon trigger or activation can be specified using the title and data-bs-content attribute respectively. Here is the standard markup for adding a popover to a button.
Use the . modal-dialog-scrollable class to enable scrolling inside the modal.
I have this popover, with a scroll bar
HTML
<ul class="navbar-nav pull-right">
<li><a href="#" data-toggle="popover" title="Notifications" data-html="true" data-content="<a href='?Profile'><div class='pop-text'>Notification 1</div></a><hr /><a href='?Profile'><div class='pop-text'>Notification 2</div></a><hr /><a href='?Profile'><div class='pop-text'>Notification 3</div></a><hr /><a href='?Profile'><div class='pop-text'>Notification 4</div></a><hr /><div><p id='foot-notification-pop'><a href='?notification'>Show all</a></p></div>">Notification</a></li>
</ul>
CSS
.popover-body {
height: 200px;
overflow-y: auto;
}
I want to show the scroll bar only when needed, that is only when the height of the popover-content go over the height of 200px. At the time the scroll bar is always displayed, but is not clickable (of course) when the height is less than 200px. How can i do it? Any help would be greatly appreciated. Thanks!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With