Usage within another directive

[iominh]

trafficstars

Recently a user had to use ng-scrollbars within another directive but the Malihu scrollbars were not added because of the other directive's compilation where the scrollbars were added when there was no content in the DOM. The workaround was to have the other scrollbar just call Malihu directly without using ng-scrollbars.

Look into methods so that ng-scrollbars can be used within another directive.

[jmls]

did you ever get this working ? I've just hit the problem trying to use < ui-layout-container ng-scrollbars ng-scrollbars-config="config"> with angular material.

Would love to be able to use this toolkit ...

[iominh]

Hi Jmls,

Another workaround is to have ng-scrollbars applied to a child or parent element that isn't in conflict with the other directive. Maybe try something like:

html

```

There's also an Angular Material demo I really quickly hacked together for another user a while ago: http://iominh.github.io/ng-scrollbars/10.html

[jmls]

I'm having some problems trying to get this to work with a material "theme" ;)

so, I have this div

<div ng-class="vm.paletteVisible ? 'palette-closed' : 'palette-open'"  style="overflow: scroll;">

and this is the scrollbar in a div by default:

so, if I now have

 ScrollBarsProvider.defaults = {
            autoHideScrollbar: false,
            setHeight: 500,
            scrollInertia: 500,
            axis: 'yx',
            advanced: {
                updateOnContentResize: true
            },
            scrollButtons: {
                scrollAmount: 'auto', // scroll amount when button pressed
                enable: true // enable scrolling buttons by default
            },
            theme: 'dark'
        };

and change the div to be

<div ng-class="vm.paletteVisible ? 'palette-closed' : 'palette-open'"  class="ng-scrollbar-container" ng-scrollbars style="overflow: scroll;">

I then get

so not only now do I get a disabled scrollbar, I get the ng-scrollbars but only half-way ;)

#1 how do I make the ng-scrollbar "fit" the div without knowing the height ? #2 how do I get rind of the "disabled" scrollbar ?

thanks!

[jmls]

ok, so changing the style to be

style="overflow: auto;"

seems to remove the "additional" scrollbar.

I was looking at the "setHeight" parameter. Apparantly this can be set as

Set the height of your content (overwrites CSS height), value in pixels (integer) or percentage (string).

however, if I change the value to "100%" (or any number ending with a "%") then the div contents do not show