0
337
ViewsSurrounding content does not move when expanding Material UI Accordion
I am working on an UI for a webapp that can have multiple projects open in one session. The logical component in the left navigation bar is an accordion, because the user may or may not want to view the list of active projects.
When collapsed, this looks good:
However, the expansion does not move the Divider down or resize the containing div and it looks like this:
As you can see, the contents of the Accordion are showing below the Divider. I also do not like that it repositions the AccordionSummary when expanding, but I can deal with that later.
I have a codesandbox that contains the basic UI framework. The ProjectsTile.js and ProjectsTile.css files contain code to support both the Material UI Accordion and an attempt I made at coding an Accordion from scratch. Neither solution worked to move the other contents of the NavDrawer.js when expanding the Accordions. How can I make the content below the ProjectsTile in the NavDrawer move down during Accordion expansion and back up upon collapse?
1 answers
Answer question0
position: absolute should be used carefully because this is the reason why the divider won't move with the Accordion.
I changed your ProjecTile.css
.projects-tile-accordion {
position: absolute;
left: 45px;
text-align: left;
display: block;
width: calc(100% - 45px);
color: white;
}
to this:
.projects-tile-accordion {
display: block;
width: calc(100% - 45px);
color: white;
}
Additionally I added some margin to your AccordionDetails in the same CSS:
.manual-accordion-expanded-details {
margin-left: 40px;
}
Now your Accordion looks like this:
