Open ronnievsmith opened 6 years ago
Ugh, text-overflow: ellipsis
is such a fickle beast...
It looks like it's a problem for primary text too:
From the screenshot above, I see two different problems:
We're setting text-overflow: ellipsis
on mdc-list-item
, which won't work because A) mdc-list-item
is display: flex
, and B) mdc-list-item
can have multiple lines of text.
According to MDN:
The text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example).
mdc-list-item__graphic
should have flex-shrink: 0
, but it doesn't, so it gets squished when the text is too long. (I filed #1941 for this.)
Here's a workaround until we figure out whether it's possible to fix this in MDC Web:
<span class="mdc-list-item__text">
<span class="ellipsis">
Photos Photos Photos Photos Photos Photos Photos Photos Photos Photos Photos Photos Photos Photos Photos
</span>
<span class="mdc-list-item__secondary-text">
<span class="ellipsis">
Jan 9, 2014 Jan 9, 2014 Jan 9, 2014 Jan 9, 2014 Jan 9, 2014 Jan 9, 2014 Jan 9, 2014 Jan 9, 2014 Jan 9, 2014 Jan 9, 2014
</span>
</span>
</span>
and:
.ellipsis {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Using the workaround above (and adding flex-shrink: 0
to __graphic
), I get this:
Thanks for filing this!
Glad to contribute. This short CSS below is how I worked around it. Simply apply my-list
(or whatever class name you want to give it) as follows to the <ul>
wrapper element.
.my-list .mdc-list-item__graphic {
/*background:green;*/
height:2.8em;
width:2.8em;
border-radius:50%;
text-align: center;
margin-right: 18px;
}
.my-list .material-icons {
font-size: 2.8em;
vertical-align: middle;
}
.my-list .mdc-list-item {
white-space: normal;
}
OK, I think I got a solid work-around now (for the two-line flavor). Had to set height:auto
and margin-bottom:1em
on the li
. The items were stacking atop one another on mobile view.
.my-list .mdc-list-item__graphic {
/*background:green;*/
height:2.8em;
width:2.8em;
border-radius:50%;
text-align: center;
margin-right: 18px;
}
.my-list .material-icons {
font-size: 2.8em;
vertical-align: middle;
}
.my-list .mdc-list-item {
white-space: normal;
}
.my-list.mdc-list--two-line > .mdc-list-item {
height: auto;
margin-bottom: 1em;
}
In order to include mdc-list in a flex layout, some elements need to be display: block. These are the changes needed to make the list fit properly in the parent layout (max-height value is for two lines secondary text dense list, overriding it as max-height: none, will allow the list item to grow), any width value is needed:
.mdc-list-item__text {
@include mdc-typography-overflow-ellipsis;
display: block;
flex: 1;
width: 100px;
.mdc-list-item__secondary-text {
display: block;
line-height: 1.25em;
max-height: 2.5em;
overflow: hidden;
white-space: normal;
}
}
[default]
aws_access_key_id =
Too lazy to create a codepen but it's there. Issue is that when the secondary text is long/verbose enough, it won't wrap as expected, it just renders out as one line forcing a nasty horizontal scroll. I noticed it implementing mdc-list-item__secondary-text with a long sentence.
Web Inspector shows the cultrip:
white-space: nowrap;
on.mdc-list-item
Toggling that line off fixes it.