Dynamic height for material ui tab containers

Question

I'm having a problem which at first I thought it was the general configuration of my app and the height I was giving to my page wrapping classes. But I made a simple out of the box material ui tab example and it seems this is natural to material ui Tabs Component.

Material UI tabs component gives their tab container the same height, being that height the largest of all its containers. So if you have one tab content with lots of content in it, it makes the other tab contents just as large, even though they may only have one text field and a button in them.

How can I make it that the height of the container adjusts to the content of its own tab?

Here is a visual

Here is why TAB ONE is so large, TAB TWO is setting the height

Here is a webpackBin for you to see the code working and mess with it.

One hack I've done so far is setting a definite height and overflow, but I don't want to do that because it creates a double scroll bar (one in the tab container, one in the body) besides, it's buggy looking.

I would like it if the tab container (the one with the green border) adjusts to the content as it does in TAB TWO, BUT individually.

Thanks in advance!

Answer 1

If you set the height based on the given element's current visibility you will be able to resolve this issue.

Example

.react-swipeable-view-container > div[aria-hidden="false"] {
    height: 100%;
}

.react-swipeable-view-container > div[aria-hidden="true"] {
    height: 0;
}

Note: this solution could be improved by using a better selector, something more descriptive like a class name. I suppose it's subjective though, using an attribute selector is not technically wrong and actually more specific than just a class.

Demonstration: https://www.webpackbin.com/bins/-Ky0z8h7PsdTYOddK3LG

Answer 2

animateHeight will animate height on tab change. if all tabs have different height it will show height accordingly.
Example:

<SwipeableViews
  animateHeight // it will animate height on tab change
>
    <div>{'slide 1'}</div>
    <div>{'slide 2'}</div>
    <div>{'slide 3'}</div>
</SwipeableViews>

Happy Coding ...!