CODEWITHSUNDEEP
reactjsmaterial-ui
Alexandre Krabbe
Alexandre Krabbe

Reputation: 771

How to have multi line options in a select Material UI

The goal is simple, I need to have a Material UI Select where its options (MenuItem's) are able to wrap long texts, for instance this would be text of one option:

"Edificação nova ou com reforma geral e substancial, com menos de dois anos, que aparesente necessidade apenas de uma demão leve de pintura para recompor a sua aparência"

As it stands now, the option is one big line of text, like so: enter image description here

So how can this be achieved in order to turn the select into a mobile friendly one?

Thank you.

Upvotes: 4

Views: 7025

Answers (2)

Amarbir
Amarbir

Reputation: 23

Passing className to MenuItem was not working for me. I had to pass it from Select Input Props

<FormControl {...rest} error={isError}>
  <InputLabel>{label}</InputLabel>
  <MuiSelect
    {...field}
    name={name}
    value={selectedValue || defaultValue || ''}
    label={label}
    inputProps={{className: classes.listItem}}
  >
    {data.map(item => (
      <MenuItem key={item.value} value={item.value}>
        {item.label}
      </MenuItem>
    ))}
  </MuiSelect>
  {renderHelperText()}
</FormControl>

Upvotes: 1

Zabi Babar
Zabi Babar

Reputation: 384

To change the width of the menu you can provide the prop MenuProps to Select with the required styling.

After that you need to allow the list to wrap around. By default, MenuItem has white-space set to nowrap. You should change that to normal to allow wrapping. I have copied the material-UI code from codesandbox for Select but removed redundant code.

Notice menu and listItem in the makeStyles

const useStyles = makeStyles((theme) => ({
  button: {
    display: 'block',
    marginTop: theme.spacing(2),
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  menu:{
    width: 200,
  },
  listItem: {
    whiteSpace: "normal",
  }
}));

export default function ControlledOpenSelect() {
  const classes = useStyles();
  return (
    <div>
      <Button className={classes.button} onClick={handleOpen}>
        Open the select
      </Button>
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-controlled-open-select-label">Age</InputLabel>
        <Select
          labelId="demo-controlled-open-select-label"
          id="demo-controlled-open-select"
          open={open}
          onClose={handleClose}
          onOpen={handleOpen}
          value={age}
          onChange={handleChange}
          MenuProps={{className: classes.menu}}
        >
          <MenuItem className={classes.listItem} value="">
            <em>None</em>
          </MenuItem>
          <MenuItem className={classes.listItem} value={10}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan diam ac elit ultricies volutpat. Curabitur ac accumsan massa, suscipit.</MenuItem>
          <MenuItem className={classes.listItem} value={20}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan diam ac elit ultricies volutpat. Curabitur ac accumsan massa, suscipit.</MenuItem>
          <MenuItem className={classes.listItem} value={30}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan diam ac elit ultricies volutpat. Curabitur ac accumsan massa, suscipit.</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

Upvotes: 4

Related Questions