Material-UI: How to column wrap a list

Issue

I’m currently using Material-UI to render a list of checkboxes, as done in this example.

The issue is that my list has about ~30 items in it, and I’m putting them all into a dialog. I want my checkbox list items to fill down to a max height (i.e. 500px), and then the rest of the list items should wrap into a new column(s), filling the horizontal space of the dialog.

I’m looking for something like this: (other stackoverflow post that’s asking for something similar)

Here is my code, copied directly from the MUI Reference Docs:

<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>

But my "root" and "listItem" classes and aren’t changing anything. Here is my (useless) CSS:

checklist: {
  display: "flex",
  flexWrap: "wrap",
  flexDirection: "column",
  height: "500px",
},
item: {
  flexBasis: "50%",     // Something I saw online
},

Do I need to override some of the standard MUI styles or something?

(I really don’t want to split my CHECKS list into 3 separate lists and flexboxes, and wrap all that in a big flexbox, etc etc)

Solution

You can use column wrap, and make sure to set overflow to auto to show the horizontal scrollbar:

const useStyles = makeStyles({
  container: {
    display: "flex",
    flexFlow: "column wrap",
    gap: "0 30px",
    backgroundColor: "pink",
    height: 300, // set the height limit to your liking
    overflow: "auto"
  },
  item: {
    width: "auto"
  }
});

<div className={classes.container}>
  {CHECKS.map((value: string) => {
    return (
      <ListItem key={value} className={classes.item}>
        <ListItemIcon>
          <Checkbox edge="start" disableRipple />
        </ListItemIcon>
        <ListItemText primary={value} />
      </ListItem>
    );
  })}
</div>

Live Demo

Answered By – NearHuscarl

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0