Material-ui: [ListItem] Overflow for primaryText

Created on 13 Jul 2016 · 3Comments · Source: mui-org/material-ui

Problem description

The ListItem component with primaryText overflows it's container. Unlike secondaryText, there is no option to set the number of lines before overflow, and there is no overflow behaviour by default. I think it's _possible_ to target the div the text is rendered in by setting a className on the ListItem, then finding the first child div's second div, but that seems error-prone because it depends on the generated HTML.

Steps to reproduce

Create a ListItem within a List, and set it's primaryText to a long enough string to cause overflow.
The text will overflow the end of the list.

Versions

Material-UI: 0.15.2
React: 15.2.0
Browser: Safari 10

Source

finaiized

👍4

Most helpful comment

I realize this is old, but just to throw my two cents in... Why don't we just make the primaryText show an ellipsis on overflow by default? Sure maybe primaryText shouldn't be so long that it overflows, but if it does, shouldn't it just show the ellipsis instead of overflowing and looking broken? I don't see a reason not to just implement that by default, unless there is something else that depends on it being overflow: visible.

justinmc on 7 Dec 2016

👍49 ❤2

All 3 comments

@finaiized In my opinion,primaryText is meant for titles and secondaryText for description, which is why the format is kept that way. A text shouldn't be so long as to overflow. Otherwise the overflow : hidden style along with other styles preventing overflow can be given to primaryText style as well just like those in secondaryText and a PR can be made.

nehalbhanushali on 14 Jul 2016

@finaiized Looks like a solution for this has been posted. However, primaryText should not be so long that wrapping of texts takes place and I don't think implementing this in MUI project will benefit other users! 😄