I'm having some trouble with the Tabs/SwipeableViews from React. I copied this: MaterialUI Tabs. Which overall works fine!
I just have a small issue with padding in the content.
My result:
Current Result
Overall buttons work all fine and dandy, + the animation aswell. But when I inspect the page there is a 24px padding on the content (It was previously on the buttons aswell, I was able to fix this with just overriding the style. But the content of the *Swipeablev
Wanted result:
Wanted result
I've tried a few different things, even dirty tricks as doing -24px margin. But that broke the tabs.. Any help would be much appreciated and hopefully I gave enough information on the matter!
Have a nice day.
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`full-width-tabpanel-${index}`}
aria-labelledby={`full-width-tab-${index}`}
{...other}
>
{value === index && (
<Box style={{ padding: 0 }} p={3}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
your issue was in the above function. you needed to remove the padding from the Box within the TabPanel function.
I believe the issue was you were giving it the prop of p={3} which gives it default padding
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments