Is there a way to adjust the placement of this AccordionDetails utilizing Material UI's Grid system?

Question

Is there a way to adjust the placement of this AccordionDetails utilizing Material UI's Grid system?

Here is a sketch of what I am aiming for:

This is my implementation using Material UI's Accordion component.

Below is the code snippet for the AccordionDetails section, which is where I need assistance. Specifically, I want to align FilterC/the switch/FilterD on one line and the slider on the next line within the AccordionDetails component.

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

I believe I may need to apply a class to AccordionDetails and utilize FlexBox or possibly incorporate Grid somehow. However, I am finding this task quite challenging. Any guidance would be highly appreciated.

css reactjs material-ui

Answer 1

Answer №1

Take note that the AccordionDetails component is set to display flex by default. To stack all items under each other, consider adding a class with "direction: column". On each row, you have the flexibility to use different layouts like another grid with "direction: row", which is the default setting.

.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>

Answer 2

Take note that the AccordionDetails component is set to display flex by default. To stack all items under each other, consider adding a class with "direction: column". On each row, you have the flexibility to use different layouts like another grid with "direction: row", which is the default setting.

.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>

Answer 3

Answer №2

If you are utilizing styled components, here is an equivalent solution:

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>

(This is a TypeScript flavored styled component)

Answer 4

If you are utilizing styled components, here is an equivalent solution:

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>

(This is a TypeScript flavored styled component)

Is there a way to adjust the placement of this AccordionDetails utilizing Material UI's Grid system?

Answer №1

Answer №2

Similar questions

Incorporating stick-to-top scroll functionality using AngularJS and ng

Altering the dimensions of radio buttons

What is the best way to set a fixed width for my HTML elements?

Alter the font color upon clicking the menu using jQuery

varying heights in bootstrap columns

Annoying AngularJS Scrolling Problem

Easily choose multiple items at once by searching with react-select

Experiencing a console error which reads: "SyntaxError: Missing ) after argument list."

Customize Material UI properties within classes

Cannot display value in NumericFormat when using MUI TextField due to prefix restrictions

Previewing images with Dropzone through extending file types

Issue with horizontal scrolling functionality in DataTables

sticky placement changes when option is chosen

Using a parent Id to implement React Material UI classes

Difficulty with Bootstrap 4 mobile navbar dropdown feature

Having difficulty sending emails with attachments using AngularJS

Custom Sign-in features in NextJS now direct users to the default form for entering login

The radial gradient in d3.js does not properly affect paths

Enhancing MUI components with TypeScript Augmentation for custom props

Unable to execute the React application on another device