You can use overflow:auto
. Read more about overflow property here
How to show Bootstrap 3 popover scroll only when needed
-
05-10-2022 - |
题
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!
解决方案
其他提示
Set overflow-y to auto. This will show the scroll only when the content crosses 200px height.
"overflow-y: auto;"
This should work.
After opening the popover, write a settimeout and calucate the height of the popover by css.
If height is more than required, add
$("popover-content").css("max-height", "200px");
$("popover-content").css("overflow-y", "auto");
This will help :)
不隶属于 StackOverflow