Verticaltab Material React UI is being overlaid by tab content

Question

I’m trying to use this component of vertical guides, but when I insert a large content it is superimposing my vertical-tab as you can see in this demonstration

return (
    <div className={classes.root}>
      <Tabs
        orientation="vertical"
        variant="scrollable"
        value={value}
        onChange={handleChange}
        aria-label="Vertical tabs example"
        className={classes.tabs}
      >
        <Tab label="Item One" {...a11yProps(0)} />
        <Tab label="Item Two" {...a11yProps(1)} />
        <Tab label="Item Three" {...a11yProps(2)} />
        <Tab label="Item Four" {...a11yProps(3)} />
        <Tab label="Item Five" {...a11yProps(4)} />
        <Tab label="Item Six" {...a11yProps(5)} />
        <Tab label="Item Seven" {...a11yProps(6)} />
      </Tabs>
      <TabPanel value={value} index={0}>
        <Grid container>
          <Grid item xs={6}>
            ELemento 1 sadasdasdasdasdadadad
          </Grid>
          <Grid item xs={6}>
            Elemento 2 sadasdasdasdasdasdasd dsadasdasdsadasdsadasdadaddsadasd
          </Grid>
        </Grid>
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item one
      </TabPanel>
    </div>
);

As you can see, the contents in my <Grid> are superimposing the <Tabs> when the size is large, there is some other element I should use in place of the <Grid> so that the content does not overlap the other?

Answer 1

Hello,

You can even keep up with the components you’ve made,what’s happening is that the Guides and content are rendered into simple Divs elements without applying CSS’s that properly deal with the overlay of the elements by pushing/squeezing the content.

Here a similar demonstration, but applying the class corrections.

https://codesandbox.io/s/material-demo-3ej9j

A hint, always note how the Material-UI elements are rendered (abuse-use of dev-tools to inspect the generated elements), this helps to understand how the elements are arranged in html.