How to remove Accordion gap when expanded?

Question

I'm trying to have the Accordion MUI component NOT move and NOT apply top and bottom margins to some elements while it is in the expanded mode.

Example follows like this, but it's not working, my component is still too "jumpy" (when expanded it increases in width and like some invisible margins are being added)

...
expanded: {
  margin: '0px',
},
test: {
  '&$expanded': {
    margin: '0px',
  },
},
...

   setExpanded(!expanded)}
    classes={{
      expanded: classes.expanded,
    }}
  >
    The Summary
  
  
    the details

user_9449426 · Answer

You can do that by setting the Accordion margin to auto which should be the same as setting it to 0. Make sure the style is applied to every Accordions on the screen. See this example here.

The Accordion is being moved when expanding is just a side effect of positive margin plus the transition effect when expanded. Removing the margin will likely fix your issue.

import { withStyles } from "@material-ui/core/styles";
import MuiAccordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import Typography from "@material-ui/core/Typography";

const Accordion = withStyles({
  root: {
    "&$expanded": {
      margin: "auto"
    }
  },
  expanded: {}
})(MuiAccordion);

Live Demo

user_3569749 · Answer

In MUI v5, it's as easy as setting disableGutters to true. This prevents all up/down repositioning when expanding the Accordion. More info here: https://mui.com/material-ui/api/accordion/#props.

How to remove Accordion gap when expanded?

2 Answers

Live Demo