make scrollbar height of div

[jmls]

at the moment, I have to set the scrollbar height to be a fixed value. How can I change this so that it's by default the same height as the div ?

this is what I have at the moment

        ScrollBarsProvider.defaults = {
            autoHideScrollbar: true,
            setHeight: 750,

<div flex="" layout-fill class="ng-scrollbar-container autoscroll" ng-scrollbars>

[jmls]

anybody got a clue on how to do this ?

[iominh]

Hi @jmls, apologies for the delay but I'm super busy at work so I haven't had too much time. My advice at the moment would be to perhaps look at http://iominh.github.io/ng-scrollbars/fullpage.html. You don't need to explicitly set that setHeight value. Perhaps you can just have height 100% for the container div and make sure it inherits 100% height from all parent elements.

Also maybe check out Malihu's demos (https://github.com/malihu/malihu-custom-scrollbar-plugin/tree/master/examples) as he's got a bunch of demos which may help

[ghost]

sometimes, I need to set my container height same to the content height. But if I set the container height 100%, the containet height would be zero,it's because position relative element cannot inherit height form the parent with a percentage height. how to solve it?

[iominh]

Hi @Tomatoo, elements only inherit height from their parent element if the parent element is anything other than position static (the default), so if you're specifying a percent height for any of these parent elements then you'll need to also set the position to non-static. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent

I'm guessing one of the element's parent elements has position static (no position specified)

[Northout-Salman]

Hi iominh I need your help, i have a div with ng-scrollbars directive, they are working fine i add height:300px; but not working with max-height like max-height :300px;, the problem with height:300px is that sometime less data will come, then unnecessary space will occure. here is my code html

<footer class="song-playlist" ng-scrollbars>
 <ul class="song-playlist-list">
<li ng-repeat="track in tracks">
<button title="Play {{track.title}}" ng-class="{'is-active': player.playing === track.src }" ng-click="playPause($index);addToHistory(post._id,player.playing === track.src);">
<span class="playlist-tiny-thumb"><img width="25" height="25" src="{{track.artwork_url}}"></span>
<span class="flex-auto"> {{track.title}} </span>
<span class="h6"> {{ track.duration / 1000 | hhmmss }} </span>
</button>
</li>
</ul>
</footer>

css .song-playlist {height: 200px; overflow-y: auto; overflow-x: hidden;}

[Northout-Salman]

see this http://embed.plnkr.co/hKrKxu2dKQNLDcNCpKvR/

[iominh]

Hi @Northout-Salman -- is that Plnkr using the right library? It looks like it's using https://github.com/echa/ng-scrollable and not ng-scrollbars. If you can update your plunkr it'll be much easier for me to debug