Dynamic height for material ui tab containers

user_2083766 0
Viewed 5546

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 enter image description here

Here is why TAB ONE is so large, TAB TWO is setting the height enter image description here

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!

material-ui reactjs sass css
3 Answers

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

user_52834760

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 ...!

user_67274870

There's a merge request that have been accepted here on the lib that could be interesting with a new method called updateHeight https://github.com/oliviertassinari/react-swipeable-views/pull/359

<SwipeableViews
  action={actions => {
    this.swipeableActions = actions;
  }}
  animateHeight
>
    <div>{'slide n°1'}</div>
    <div>{'slide n°2'}</div>
    <div>{'slide n°3'}</div>
</SwipeableViews>

Then:

componentDidUpdate() {
    this.swipeableActions.updateHeight();
}
user_30752430
Related