CODEWITHSUNDEEP
reactjsmaterial-ui
optional
optional

Reputation: 2782

Scrollable List Component from Material-UI in React

How to make the List component (see https://material-ui.com/components/lists/) fixed-size and scrollable? Every time I add a new ListItem the List expands, however I would like to be able to scroll through it if content gets bigger than the container.

Upvotes: 78

Views: 171625

Answers (3)

Ricardo
Ricardo

Reputation: 19

In my case I was looking for a way to make the content inside a <Card /> to be scrollable, in case the amount of text was larger than the maxHeight of the card.

This worked perfectly for me:

<Card sx={{ minHeight: '60vh', overflow: 'auto' }}></Card>

Upvotes: 0

Onuray Sahin
Onuray Sahin

Reputation: 4135

This works if you want the list to fill all height of the container:

<List style={{maxHeight: '100%', overflow: 'auto'}} />

Upvotes: 38

optional
optional

Reputation: 2782

I just found out that you can add properties. 'maxHeight' and 'overflow' are the ones I was needing to solve my problem. For example for a List in a Paper container:

<Paper style={{maxHeight: 200, overflow: 'auto'}}>
  <List>
   ...
  </List>
</Paper>

Upvotes: 137

Related Questions