twitter-bootstrapbootstrap-selectcustom-scrolling

Bootstrap selectpicker + mCustomScrollbar not working as expected


I am trying to achieve custom scroll bar on bootstrap select picker. But it was not working as expected. Please find the fiddle here

$(objElm).selectpicker({
      size: 4
});

$('.dropdown-menu.inner, objElm').mCustomScrollbar({
    theme:"dark"
});

http://jsfiddle.net/20a66247/2/

your help is much appreciated. Thanks in advance


Solution

  • bootstrap style override and set timeout helped me to achieve what I expected. PFB the updated fiddle

    $('.dropdown-toggle.selectpicker').on('click', function(){ setTimeout(function(){ var jDropdown = $('.dropdown-menu.open '); if(!jDropdown.hasClass("mCustomScrollbar")) { jDropdown.mCustomScrollbar({ axis:"y", autoDraggerLength:false, dropupAuto: false, advanced: { updateOnBrowserResize: true, updateOnContentResize: false, autoScrollOnFocus: false } }); } }, 50); });

    http://jsfiddle.net/20a66247/6/