How to force max-height: 100% to make it fill the outer container?

[dexx086]

Hi!

First of all, thanks for this great plugin!
What I'm looking for help in is to be able to make the scrollbar to always fill the outer container.

The outer container has a variable size (can be resized by mouse). At first render the scrollbar looks OK, because it fits the whole container. However, if I start to change container's size, the scrollbar's height is updated only with a slight delay (checking from the code: by 300ms). This is because the plugin manually sets the 'max-height' property of the '.scroll-content' DIV, so even if I set 'max-height: 100%', it will be overridden by the plugin (with a calculated max-height) so it always will be updated only by the plugin.

However in my case, the 'max-height: 100%' should work fine, as the outer container should define the final height. And by the 100% constraint, it would be updated immediately by the browser, so no lag would occur.

Here's a jsFiddle about the lag issue.

And the reason why it's a problem (not actually the delay of the update), but the fact that in Firefox while the new size is updated by the plugin, the horizontal scrollbar becames visible until that! I noticed it because I'm on Linux with a dark system skin, so the scrollbar is dark and pops up very noticeable.
Here's a catched moment about it (notice the dark system scrollbar in the center horizontally).

Do you see any solution to my problem? All I would like to achieve is to avoid the plugin to manually set the 'max-height' property of the '.scroll-container' DIV when it has 100% value already defined. Without it, I think it would work as expected.

Thanks in advance.

[gromo]

You can modify code to use vertical-only scrollbar - a little bit of JS/CSS changes, and done.

Another way is to handle mouse drag and call scrollbar's init method.

[dexx086]

Thanks for you response.

Using only vertical scrollbar is not an option, because even though in this very specific case this could work, but as a general, this problem would still occur when you need both scrollbars.

The second mentioned way: "handling mouse drag"? Do you mean when changing the container's size, should immediately call scrollbar's init method to update the scrollbar as well? This could work in my specific case (I exactly know when it happens), and I'll give it a try, but a more general solution (where the plugin simply would not set max-height in a let's say 'full-size' mode) would work for more cases, and automatically. It needs some investigation of course to see it would work for the most situations, but do you see any chance for such working mode to be supported? Or do you have other idea?

[gromo]

I thought about some kind of full-size mode, but it requires a lot of changes in code structure, and I don't have time to implement it. Also, this option won't work in all browsers, so current check in 300ms will remain as a hack - no way to get rid of it. So, for now, handling mouse drag & calling init method is the best option.

[dexx086]

Ok, thanks for your response, I'll try this way then.

Please let me have one more question regarding you've just mentioned "...current check in 300ms will remain as a hack - no way to get rid of it...": I was already about to ask if you have specific reason to use this timer method instead of some other size detection methods like ResizeSensor?

Did you have some bad expirence with libraries like this, or you just didn't have time/need to implement a more accurate method? No blaming, just being curious about it because I'm in the thinking of replacing this timer method, and just wondering if you would be interested in it if I succeed.

[gromo]

It will be great if you will be able to implement this method. But remember we should detect not only container size changes, but also content size changes to update scrollbar sizes/positions.

[NielsHolt]

Hi
I had the same issue and solved it by using javascript-detect-element-resize and calling this.init when this.wrapper.parent is resized
options.onInit: function(){ this.wrapper.parent().resize( $.proxy( this.init, this ) );}

[gromo]

@NielsHolt what about internal content, like loaded images? I'm not sure that loaded images or internal content resizing will resize parent element.

[NielsHolt]

Well, changing content inside the scrollbar would not affect the size of the parent container
My solutions deals with changing the size of the parent container without changing the content inside the scrollbar and making the scrollbar update