[Tabs] - Tab content height does not update

[MrXyfir]

Right now I have some content within a tab and part of that content is a button that when clicked loads and renders comments for the page. The problem here is that the height for .md-tabs-content > div > div is being automatically set based on the height of the original content but does update when the size of the content updates.

I'm not sure what the reasoning is for explicitly setting the height, but for now I'm simply overriding it with height: initial !important and that doesn't seem be causing any issues so far. Is there a better way to be doing this?

[mlaursen]

Yeah, so the reasoning behind the setting of the tab content height is because of how the SwipeableViews was implemented. Without the setting of the height, the scrollbar will always be set to the max height of any of the content so there can be some content that has a lot of extra white-space on the bottom.

Behind the scenes, you get something like this: (NOTE: terrible artwork incoming!)

So in this case, the scrollbar would always be the height of Content 1. Right now, I do not know of a better way to listen to content changes to re-update the height. It can only be done manually at this point by doing tabsRef.forceUpdate() once new data has come :/

I would be happy to hear suggestions on alternatives, or make it so it is possible to disable the height setting if you are ok with the scrolling issue I described.

[MrXyfir]

That makes sense. I looked around the docs but must've missed forceUpdate().

So after some light searching I've found some things that might be useful in implementing dynamic sizing:

• DOMSubtreeModified Not a perfect solution, but probably the most simple for now.
• css-element-queries' ResizeSensor class. I didn't look too deeply into this so I'm not sure if it'll work here.
• ResizeObserver for the future once it's fully implemented in enough browsers.
• More resources here.

[arnthor3]

First off, wonderful work on the project.
Second, is there any news on this issue?
Would it make sense to use the resize observer polyfill? Found here

[mlaursen]

Sorry, I haven't had time to think about this one yet with all the other things I need to complete for 1.1.0. I had been thinking about going with the ResizeObserver/polyfill approach once I start this ticket though. It sounds like the best solution.

[hisapy]

I had a similar problem... <Tab /> content is fetched in after rendering the tabs container. The solution I found is just

<TabsContainer slideStyle={{height: 'auto'}} >
  // tabs and tab and other stuff here
</TabsContainer>

Before fetching the data the size is just of the CircularProgress but as soon as I get the data the panel height adjusts automatically

[c0b41]

Set slideHeightProp and working wery well

slideHeightProp={'height'}