React MUI - Consistent Tab Content Height

I understand that ideally should be placed at the top of the page. However, Assume they are place in the middle of the page. When changing from a tab with a lot of content, to a tab with little content, the scrollable area disappears. Is there anyway to preserve the white space?

https://codesandbox.io/s/labtabs-material-demo-forked-y39i2g?file=/demo.tsx

Here is a code sandbox example.

Step 1 scroll down to tabs.

Step 2 scroll down tab 1 content( leave tabs visible)

Step 3 click tab 2 (Mouse no longer is hovering over tabs because vertical scroll content vanishes)

Edit: I am able to change my root div min height to whatever I need hard-coded. I feel like this hacky though and not dynamic to the tallest tab

1 answer

  • answered 2022-05-07 07:34 Amr Eraky

    You can set minHeight style to tab2 and tab3 to be the height of tab1 using useRef

    const tabRef = React.useRef<HTMLDivElement>(null)
    const [tabHeight, setTabHeight] = React.useState(0);
    React.useEffect(() => {
        setTabHeight(tabRef.current.clientHeight)
    }, [tabRef]);
    
    
    <TabPanel value="1" ref={tabRef}></TabPanel>
    <TabPanel value="2" sx={{ minHeight: tabHeight }}></TabPanel>
    <TabPanel value="3" sx={{ minHeight: tabHeight }}></TabPanel>
    

    Demo:
    https://codesandbox.io/s/labtabs-material-demo-forked-40kpwc?file=/demo.tsx

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum