Search code examples
javascripthtmlcsstwitter-bootstrappopover

Overflow scrollbar in popover window not working (Bootstrap)

I have a couple of popovers on my site that contain a number of a href tags. For most of the popovers there's no problem in terms of height. However, two of them require an overflow/scrollbar solution.

This is what I have tried so far but it does not appear to work:

HTML:

<div class="col-sm-2">
    <a href="#" class="thumbnail" data-toggle="popover" data-trigger="focus" title="Yeast & Mould" data-content='<ul><li><a href="First link"</a></li>
      <li><a href="Second link"</a></li>
      <li><a href="Multiple links"</a></li>
      </ul>
    </a>
</div>

Javascript:

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({html: true;});
});     
</script>

CSS:

.popover-content {
    overflow-y: auto;
}

Any ideas as to how I can resolve this problem would be greatly appreciated.

Solution

  • As Reddy suggested in his comment, setting a max height to the popover resolves this issue. Thanks Reddy!