Material UI React — Select text wrap for long strings in menu (mobile/desktop)?

Admin 1
Viewed 250

I have a few long strings in an MUI Select component. Is there any way to add a text-wrap or something similar to make sure the width doesn't exceed and doesn't cut off in mobile.

Desktop:

enter image description here

Mobile:

enter image description here

<FormControl sx={{ m: 1, minWidth: '100%', marginLeft: 0, padding: 0 }}>
  <Select
    value={prompt}
    onChange={handleChange}
    displayEmpty
    inputProps={{ 'aria-label': 'Without label' }}
    sx={{'bgcolor': 'rgba(139, 139, 139, 0.3)', color: 'white', border: '1px solid rgba(255, 255, 255, 0.4)', minWidth: '100%', marginLeft: 0, padding: 0}}
  >
    {prompts.map((prompt, i) => <MenuItem value={i}>{prompt}</MenuItem>)}
  </Select>

prompt is a string[].

How can I style the select menu? Is there any way to make sure the dropdown width doesn't exceed the Select width?

material-ui typescript reactjs css javascript
1 Answers

It should be possible to get multi-line / wrapping menu items when setting white-space to normal

in CSS:

white-space: normal;

or as inline style in the Mui component (or via some sx prop I guess)

 <MenuItem style={{whiteSpace: 'normal'}} value={i}>{prompt}</MenuItem>
user_102954300
Related