Question

96

Material ui - change the height of the Accordion

rated 0 times [ 99] [ 3] / answers: 1 / hits: 7682 / 3 Years ago, wed, july 7, 2021, 12:00:00

I am working on the migration of a JavaFx HMI to a web application working with React.js. For the display of graphical widgets, I'm also working with Material.ui.

To match with the layout of the HMI I have to update the layout of some predefined components by Material ui.

In my case, I need to reduce the height of the Accordion.
I did something like this :

const IconLeftAccordionSummary = withStyles({

  root: {

    minHeight: 15,

    maxHeight: 15,

    backgroundColor: '#a5a5a5',

})(AccordionSummary);

and then I basically use it like this

<IconLeftAccordionSummary>

</IconLeftAccordionSummary>

Here is the result, it's what I'm expected when it's collapsed.

However, when I expand it, it comes back to its original height, with some margins between blocks.
Like this:

I tried different things like adding

'&$expanded': {

  minHeight: 15,

  maxHeight: 15,

},

or

expanded: {

  minHeight: 15,

  maxHeight: 15

},

in the definition of IconLeftAccordionSummary, but nothing changes.

Does anyone can help me on how to do this ? Am I at least trying to do it in the right way?

Thank you :)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sherryd

Add To Favorites

Follow

Total Points: 254

Total Questions: 92

Total Answers: 89

Location: Equatorial Guinea

Member since Sun, Feb 14, 2021

3 Years ago

sherryd questions

1 How to change 'Sec-Fetch-Dest' , 'Sec-Fetch-Mode' , 'Sec-Fetch-Site' and 'Sec-Fetch-User' value with Axios?

Sat, Feb 26, 22, 00:00, 2 Years ago

1 Accessing a getter from a parameterized getter

Sun, Feb 6, 22, 00:00, 2 Years ago

1 Typescript: derive union type from array of objects

Mon, Mar 2, 20, 00:00, 4 Years ago

1 what is th proper way to refresh a full page on SAPUI5 (ESLINT:(sap-no-location-reload))?

Wed, Feb 5, 20, 00:00, 4 Years ago

1 How to handle and validate sessions between the backend and the frontend

Tue, Apr 23, 19, 00:00, 5 Years ago

View All

answered 3 Years ago susand · Accepted Answer

After some tries I found an answer:

const StyledAccordionSummary = withStyles({

root: {

    minHeight: 15,

    maxHeight: 15,

    backgroundColor: '#a5a5a5',

    '&.Mui-expanded': {

      minHeight: 15,

      maxHeight: 15,

      backgroundColor: '#a5a5a5',

    }

},

expandIcon: {

    order: -1

}

})(AccordionSummary);

And I apply this style to the AccordionSummary component.

"root" applies on the accordion when it's closed, and the '&.Mui-expanded' applies on the accordion when it's opened.