CODEWITHSUNDEEP
cssreactjsmaterial-ui
user2824374
user2824374

Reputation: 220

How do I set maxHeight inside AccordionDetails and make it scrollable?

I have 100's of data to show using Accordion (material-ui) inside a Box component, but not sure how to manipulate the built in styles to set the maxHeight. Is there a way that I can control the styles instead of showing all movies when the dropdown is clicked?

Sandbox link

Upvotes: 1

Views: 3642

Answers (3)

I like water
I like water

Reputation: 1

I used the sx prop to achieve the desired result. Check out the following code:

<AccordionDetails sx={{ display: 'flex', maxHeight: "50vh",overflowY: "scroll"}}
{someList}
</AccordionDetails>

It will look like this

Upvotes: 0

Lakruwan Pathirage
Lakruwan Pathirage

Reputation: 657

I have created the answer with sandbox.url I have used sx prop and overflowy to scroll.

Upvotes: 1

Priyen Mehta
Priyen Mehta

Reputation: 1185

Add this style in your css file and make height according your requirement, it works!

.MuiAccordionDetails-root {
  max-height: 300px;
  overflow-y: scroll;
}

codesandbox link: https://codesandbox.io/s/react-typescript-forked-pc3udc?file=/src/styles.css:59-132

Upvotes: 4

Related Questions