W2ui sidebar with mcustomscrollbar issue

Question

I have a issue using w2ui sidebar with mcustomscrollbar. I have the w2ui sidebar associated to a div and this works fine, but when i use mcustomscrollbar i have a problem.

To use mcustomscrollbar i associated the sidebar to a sub div and the mcustomscrollbar to the first div like this

HTML:

        <div id="pane-menu">
                <div id="pane-menu-content"></div>
        </div>

JS:

This line call my method where a use the mcustomscrollbar plugin

        $.pui.common.scrollBarProperties('#pane-menu');

This line i associated the sidebar to sub div

        $('#pane-menu-content').w2sidebar({
                        ...
                        ...

After this change, the nodes of sidebar stay hidden...if i change de css and put the overflow to visible i destroy de dynamically resize of sidebar and I do not want this to happen.

If i do not use mcustomscrollbar and associate the sidebar to first div ('#pane-menu') this works fine, but i need to use mcustomscrollbar.

My question is, why the sidebar nodes stay hidden if i associate that to de sub div ('#pane-menu-content')??

Any suggestions?

Thanks guys :)

Answer 1

Here is how sidebar works. If you render it to a div, it will use that divs height and width and will generate several internal divs that will be used for sidebar purposes. In this case, here is what I think you should do.

1. Create sidebar as you normally would

2. After sidebar is created and rendered (or if it is re-rendered), apply custom scorlll bar methods to the following div

$(w2ui['sidebar'].box).find('.w2ui-sidebar-div'); // assuming your sidebar name is 'sidebar'

Sidebar has onRender event that can be used to apply custom scrollbar.

I hope it helps.