slimScroll with Twitter's Bootstrap 2.x popovers

Question

Why does not slimScroll plugin get initilised inside bootstrap popover?

I tried different selectors ( all the selectors inside popover ) but it just wont work.

First I was trying to initialise it on multiple popovers. then I tried to make only one popover and initilise slimScroll on it. No chance

this is how I initilise my popover:

jQuery("#bar-notifications").popover({ animation:true, placement: 'bottom', title: 'Notifications!', content: joint, html: true });

and here my slimScroll plugin.

        jQuery(".popover .popover-content").slimScroll({
            height: '100%'
        });

I also tried with just .popover selector.

Maybe there is good answer why they does not work together?

Answer 1

I don't understand why you set the heigth to 100%. I don't expect a scrollbar with a 100% height at all.

You can't apply slimScroll() on a element which don't exists. Your .popover-content don't exists before the popover shows.

The popover don't have a callback for onshow, but you can add one, see: Callback function after tooltip / popover is created with twitter bootstrap?.

<script>

function joint()
{
    return $('.scrollit').html();
}   
//from: https://stackoverflow.com/questions/14694930/callback-function-after-tooltip-popover-is-created-with-twitter-bootstrap

var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
  tmp.call(this);
  if (this.options.callback) {
    this.options.callback();
  }
}
function slimmer()
{
    $('.popover-content').slimScroll({
        height: '100px'
    });
    $('.popover-content').css('padding-bottom',0);
}       
    
$(function(){
    $('.scrollit').slimScroll({
        height: '100px'
    });
    
    $("#popovercontent").popover({ callback: slimmer ,animation:true, placement: 'bottom', title: 'Notifications!', content: joint, html: true });
    
    
    
});
</script>   

When the popover shows slimmer() is called now. Slimmer() add slimScroll to the content. This seems to work see: http://bootply.com/66056. For some reason you can't scoll to the end of the content (maybe ask Rochal for this). Update: By adding $('.popover-content').css('padding-bottom',0); to the slimmer function you can scroll to the end of the content.

Answer 2

The solution is easy (:

$('[data-toggle="popover"]').on('shown.bs.popover', function () {
     $('.scrollit').slimScroll({
        height: '100px'
    });
});