Menu
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.
214
const styles = (theme: Theme) => createStyles({ scrollBar: { '&::-webkit-scrollbar': { width: '0.4em' }, '&::-webkit-scrollbar-track': { '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,0.00)' }, '&::-webkit-scrollbar-thumb': { backgroundColor: 'rgba(0,0,0,. 1)', outline: '1px solid slategrey' } } });
Drag the list object into the block. Select the block and in the properties pane, select "Size and Overflow". In the "Size and Overflow" window, set the desired dimensions of the block. Select the "Always use scrollbars" radio button.
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> This works if you want the list to fill all height of the container:
<List style={{maxHeight: '100%', overflow: 'auto'}} /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
