0
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?