Accordions in a Grid pushing content down

Issue

I have a grid of accordions like in the codesandbox below. The problem is when I open one of the accordions, it pushes down all the accordions in the row below, whereas the desired behaviour is to just push down the accordion right below it and the other accordions in the lower row staying in the same place. What needs to be changed in the following code to get this effect?

https://codesandbox.io/s/basicaccordion-demo-material-ui-forked-sw4juk?file=/demo.tsx

enter image description here

Solution

You can utilize the power of the Grid component to get your desired behavior. Nesting grids within grids is the magic sauce:

Grid Layout

To do this with the material Grid component, the layout will need to be as such:

enter image description here

EXAMPLE (I forked your sandbox)

enter image description here

Answered By – ckesplin

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.