Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Material UI List Item Text: Primary Text Overflow

Sorry if this has been asked, I looked and couldn't find the answer!

I have a Material UI listview that has a set width (it's in a sidebar). I am trying to render the titles of some options, and the Primary text of ListItemText is wrapping past its container. Why is it not simply extending the container's height and going multi-line?

Thanks so much in advance!

return (
            <ListItem
              key={network._id}
              selected={user.network && user.network._id === network._id}
            >
              <ListItemText
                primary={network.name}
                sx={{ maxWidth: '100%' }}
              />
              <IconButton>
                <DoubleArrowIcon />
              </IconButton>
            </ListItem>
          );

See the text in the ListItemText element overflowing.

like image 702
Julian Durantini Avatar asked Sep 11 '25 21:09

Julian Durantini


1 Answers

All,

If you have my problem, here is what worked for me:

<ListItemText 
    primary={tooLongTitle} 
    primaryTypographyProps={{ style: { whiteSpace: "normal" } }} />

Credit: multiline with <ListItemText>

like image 197
Julian Durantini Avatar answered Sep 14 '25 10:09

Julian Durantini