CODEWITHSUNDEEP
cssflexboxmaterial-uigridaccordion
Wilson Brians
Wilson Brians

Reputation: 177

Accordions in a Grid pushing content down

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

Upvotes: 2

Views: 2654

Answers (1)

ckesplin
ckesplin

Reputation: 1793

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

Upvotes: 3

Related Questions