Getting rid of padding in Material UI SwipeableViews in React

Question

Getting rid of padding in Material UI SwipeableViews in React

Seeking assistance with the React Tabs/SwipeableViews component. I used the MaterialUI Tabs as a reference and it mostly works fine. However, I am facing a minor issue with padding in the content section.

Current outcome:
Current Outcome

The buttons function correctly with smooth animations. Yet, upon inspecting the page, there is a 24px padding on the content section (The padding was initially on the buttons as well, but I managed to resolve it by overriding the style). The content of the SwipeableViews component is causing the issue.

Desired outcome:
Desired Outcome

I have attempted various solutions, including using a -24px margin as a workaround. However, this resulted in breaking the tabs. Any assistance on resolving this matter would be greatly appreciated. I hope the provided information is sufficient!

Wishing you a wonderful day.

css reactjs material-ui

Answer 1

Answer №1

const Panel = (props) => {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`tab-${index}`}
      aria-labelledby={`tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box style={{ padding: 0 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

It seems like the padding caused an issue in your function. Make sure to remove the padding from the Box component within the Panel function.

The problem might have occurred because you assigned the p={3} prop, which adds default padding.

Answer 2

const Panel = (props) => {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`tab-${index}`}
      aria-labelledby={`tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box style={{ padding: 0 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

It seems like the padding caused an issue in your function. Make sure to remove the padding from the Box component within the Panel function.

The problem might have occurred because you assigned the p={3} prop, which adds default padding.

Getting rid of padding in Material UI SwipeableViews in React

Answer №1

Similar questions

Can you explain the meanings of <div class="masthead pdng-stn1"> and <div class="phone-box wrap push" id="home"> in more detail?

The argument passed cannot be assigned to the parameter required

I am experiencing a CSS display issue on the mobile version of my map leaflet where only the header and footer are visible

Setting the initial state for a React toggle custom hook

What is the reason for the difference in width between Bootstrap-5 row and regular div blocks?

The deployment of the Heroku React-Express App is facing challenges

Why is my table shifting when I go into fullscreen mode? Any ideas?

Issues with loading SCSS modules in NextJS

What is the reason behind the change in size and shape of the text when using "overflow: hidden"?

Expanding Side Menu with Material UI Drawer

Importing images in Typescript is a simple and effective

How do Box and Grid components differ in Material-UI?

Velocity.js causing a slowdown in animated performance

How can I eliminate the black border-color that appears when the React Material Button outline is clicked, even though I have not explicitly set it?

Encountering a 404 error when trying to navigate to the next route using the Link component

Having trouble with the WordPress style file not functioning properly

Getting the external IP address in an Axios request with NodeJS

When creating a list of children in a React app, make sure to assign each child a unique "key" prop for proper rendering

The combination of Electron and MLab creates a powerful synergy that

What are some methods for testing enzyme, react-virtualized, and material-ui components?