Currently, I am using Material-UI to display a list of checkboxes, similar to the example shown here.
The problem arises when my list contains around 30 items and I am placing them inside a dialog box. I want the checkbox list items to stack vertically up to a maximum height of 500px, after which I would like the remaining items to wrap into new columns, filling the width of the dialog box horizontally.
I am seeking a solution like the one mentioned in this post on Stack Overflow: (similar query on Stack Overflow)
Below is the code snippet from the MUI Reference Docs that I have replicated:
<List className={classes.root}>
{CHECKS.map((value: string) => { // (CHECKS = array of strings)
const labelId = `checkbox-list-label-${value}`;
return (
<ListItem
key={value}
role={undefined}
dense
button
onClick={handleToggle(value)}
className={classes.listItem}
>
<ListItemIcon>
<Checkbox
edge="start"
checked={checked.indexOf(value) !== -1}
tabIndex={-1}
disableRipple
inputProps={{ "aria-labelledby": labelId }}
/>
</ListItemIcon>
<ListItemText id={labelId} primary={value} />
</ListItem>
);
})}
</List>
However, applying custom classes 'root' and 'listItem' does not seem to be making any changes. The CSS styles I have added are as follows:
checklist: {
display: "flex",
flexWrap: "wrap",
flexDirection: "column",
height: "500px",
},
item: {
flexBasis: "50%", // Something I saw online
},
Do I need to override some default MUI styles or make additional adjustments?
(I hope to avoid splitting my CHECKS list into multiple lists and utilizing complex flexbox configurations)