React-custom-scrollbars: Is there a way to implement auto height

[asaadmahmood]

Is there a way to have the scrollbar to appear based on the content of the div and a max height applied to the div. Don't want the scrollbar to appear if content is below a specific max height.

[malte-wessel]

Not sure if I understand correctly but, If you pass a fixed height <Scrollbars style={{height: 200}}/> and your wrapped div is smaller than 200px the scrollbars shouldn't appear. If you could provide some code I'd have a look at it.

[asaadmahmood]

I'll try that out and see how it works thanks. Closing this for now, will reopen if require additional assistance.

[silvenon]

I think the question was do we have to allocate that fixed height, instead of setting a max-height, so the the content is less than that value, there isn't space below the content.

[asaadmahmood]

I just went ahead and used a different one and didn't get a chance to try this out, but if setting a fixed height produces something of a fixed height irrespective of the content then that pretty much is the issue.

[silvenon]

This is a necessary limitation, I guess. I managed to bypass it with setting width dynamically, based on the number of items. But that would only work if you know the height of the children.

[malte-wessel]

Yes, it's because the view element needs to be positioned absolute. I'm going to change this in future releases.

[asaadmahmood]

Cool, hope that change goes in soon.

[Verikon]

+1

[malte-wessel]

I just released v4.0.0-beta.1 which implements an auto-height mode. Check out the docs here. I'd appreciate your feedback!

[asaadmahmood]

Very awesome! Will give it a shot soon and let you know.

[asaadmahmood]

I tried doing a npm install react-custom-scrollbars --save and it gives me the "version": "3.1.0", what can I do to get the beta version which has the auto height stuff?

[malte-wessel]

You can grab a specific version with

npm install [email protected] --save

[asaadmahmood]

Thanks.

[asaadmahmood]

Is there a way to implement the scrollbar inside a bootstrap dropdown menu? The dropdown menu is normally hidden, but if I surround the <ul> with the scrollbar then the scrollbars container is visible. And if I add it inside the dropdown <ul>, then the <li> tags inside the <ul> don't get the styling.

[asaadmahmood]

Also is there a way to add auto height without specifying a autoMaxHeight? I want it to respect the maxheight attribute that I give in css to its child. Because if it sets a autoMaxHeight to 200, then how is it going to grow with content? It will be stuck on 200px, I want it to vary with respect to the css I give to the content.

[benmarte]

Does setting autoHeight require also setting autoHeightMin and autoHeightMax? I just tried using autoHeight without these 2 attributes and it renders with this style attribute:

style="position:relative;overflow:hidden;width:100%;height:auto;min-height:0;max-height:200px;"

Also I set my content with overflow-x: hidden and it still displays the horizontal scrollbars, is there any way to disable the horizontal scrollbars?

Thanks.

[malte-wessel]

@asaadmahmoodspin
You are probably hiding the <ul>, so the container might be still visible. You might also have some css like ul > li { /* styles */ } which means, that only direct <li> childs get the defined styles. You can't leave out autoHeightMax because that would mean, you never want to show the scrollbars. It's not possible to set the max-height property with your own css, because when the container's max-height is 200 than the view's max-height needs to be 200 minus the native scrollbars size (e.g. 200 - 15 = 185)

@benmarte
Yes, at least autoHeightMax is required (default is 200px), otherwise you have no point at which you want show the scrollbars. If you want to hide the horizontal scrollbars, make sure that your content's width isn't greater than 100% (or the width of the scrollbars container)