CODEWITHSUNDEEP
cssreactjsmaterial-ui
softwaredev
softwaredev

Reputation: 40

How can I fix the positioning of this AccordionDetails using Material UI/Grid

Here's the wireframe of what I'd like:

enter image description here

And here's what I have coded using Material UI's Accordion component.

Coded

And here's the code for the AccordionDetails, which is what my question is about. Specifically, my question is: how do I put FilterC/the switch/FilterD onto one line, and the slider onto the next line in an AccordionDetails component?

<AccordionDetails>
  <FilterC/>
  <h1>Filter D</h1>
  <Switch/>
  <Filter D/>
</AccordionDetails>

I think I need to either add a class to AccordionDetails, and use FlexBox or alternatively use Grid somehow. But, I'm positively stumped. Any help would be appreciated.

Upvotes: 1

Views: 1742

Answers (2)

HaveAGuess
HaveAGuess

Reputation: 1241

If you are using styled components an equivalent answer is :

const AccordionDetailsColumnFlex = styled(AccordionDetails)`
    flex-direction: column;
`;

<AccordionDetailsColumnFlex>
 <Grid item>
    <Grid container>
      <FilterC/>
      <h1>Filter D</h1>
      <Switch/>
      <Filter D/>
    </Grid>
  </Grid>
  <Grid item>
    <Slider/>
  </Grid>
</AccordionDetailsColumnFlex>

(TypeScript flavour styled component)

Upvotes: 0

e.a.
e.a.

Reputation: 948

note that AccordionDetails component has a display flex by default, so I would Personally add a class to it and give it a "direction: column" so all the items stack up under each other. then on each row, you can have any kind of layout like another grid with "direction: row" which is the default. also, note that you can make a grid component a container & an item at the same time, but I had found some weird behavior with that so I usually stick with explicit grid containers & items ‍‍‍

.accordionDetails: {
flexDirection: "column"
}

...

<AccordionDetails className={classes.accordionDetails}>
  <Grid item>
    <Grid container>
      <FilterC/>
      <h1>Filter D</h1>
      <Switch/>
      <Filter D/>
    </Grid>
  </Grid>
  <Grid item>
    <Slider/>
  </Grid>
</AccordionDetails>

Upvotes: 1

Related Questions