How to position expand icon on the right side of the accordion while keeping the text in the center?

user_12818045 0
Viewed 2181

I am learning Material UI and i want that my icons to expand stays on the right side of my accordion and not moves with the text to the center. I tried a couple of options but they did not lead to the desired outcome.

My question is how to postion the icon on the right side of the accordion?

codesandbox example

const Accordion = withStyles({
  root: {
    border: 'none',
    boxShadow: 'none',
    '&:not(:last-child)': {
      borderBottom: 0,
    },
    '&:before': {
      display: 'none',
    },
    '&$expanded': {
      margin: 'auto',
    },
  },
  expanded: {},
})(MuiAccordion);

const AccordionSummary = withStyles({
  root: {
    backgroundColor: 'rgba(0, 0, 0, .03)',
   // borderBottom: '1px solid rgba(0, 0, 0, .125)',
    marginBottom: -1,
    minHeight: 56,
    '&$expanded': {
      minHeight: 56,
    },
  },
  content: {
    flexGrow: 0,
    '&$expanded': {
    flexGrow: 0,
      margin: '12px 0',
    },
  },
  expanded: {},
  expandIcon:{
    order: 0,
  },
})(MuiAccordionSummary);

const AccordionDetails = withStyles((theme) => ({
  root: {
    padding: theme.spacing(2),
  },
}))(MuiAccordionDetails);



export default function CustomizedAccordions() {
  const [expanded, setExpanded] = React.useState('panel1');

  const handleChange = (panel) => (event, newExpanded) => {
    setExpanded(newExpanded ? panel : false);
  };

  return (

    <div>
      <Accordion square expanded={expanded === 'panel1'} onChange={handleChange('panel1') }>
        <AccordionSummary 
           aria-controls="panel1d-content" 
           expandIcon={<ExpandMoreIcon />}
           id="panel1d-header">
          <Typography>Collapsible Group Item #1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
             Test
          </Typography>
        </AccordionDetails>
      </Accordion>
      <Accordion square expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
        <AccordionSummary 
            aria-controls="panel2d-content" 
            expandIcon={<ExpandMoreIcon />}
            id="panel2d-header">
          <Typography>Collapsible Group Item #2</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
                   Test
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}
material-ui reactjs
4 Answers

In your content class just add this:

  content: {
    flexGrow: 0,
    margin: "auto",
    "&$expanded": {
     flexGrow: 0,
     margin: "auto",
    },
    "&:last-child": {
     marginLeft: "auto"
    }
   },

Adding the margin auto and specifying that the last child should have margin-left auto will allow you to keep the text centered while having the arrow in the right side of the accordion. Check this forked sandbox if you have questions: https://codesandbox.io/s/goofy-driscoll-xvzd5?file=/src/App.js:922-1097

user_60640730

Jean182's answer worked for me, but it overrides automatic bottom and top margins for the header text, which I wanted to keep in. Here is my css, along with the necessary imports and withStyles call for anyone who might benefit from seeing it explicitly:

import { AccordionSummary } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';

const StyledAccordionSummary = withStyles({
  content: {
    flexGrow: 0,
    margin: "auto",
    marginTop: 12,
    marginBottom: 12,
    "&$expanded": {
     flexGrow: 0,
     margin: "auto",
    },
    "&:last-child": {
     marginRight: "auto"
    }
  },
})(AccordionSummary);

and then use the StyledAccordionSummary component where you would use the AccordionSummary one.

user_119372860

Just remove flexGrow attribute like this : 

const AccordionSummary = withStyles({
  root: {
    backgroundColor: "rgba(0, 0, 0, .03)",
    // borderBottom: '1px solid rgba(0, 0, 0, .125)',
    marginBottom: -1,
    minHeight: 56,
    "&$expanded": {
      minHeight: 56
    }
  },
  content: {
  
    "&$expanded": {
     
      margin: "12px 0"
    }
  },
  expanded: {},
  expandIcon: {
    order: 0
  }
})(MuiAccordionSummary);

here the sandBox

user_145225910

You can also simply keep the values of flexGrow as 1 for both, would have same effect.

user_140369260
Related