How to show Bootstrap 3 popover scroll only when needed

Question

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!

Solution 1

Set overflow-y to auto. This will show the scroll only when the content crosses 200px height.

"overflow-y: auto;"

This should work.

Solution 2

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 :)