Menu
I have a list of elements that I'm showing for the user together with an Icon and two Buttons. So far so good, but I want this list to scale to mobile devices and shrink when necessary.
When the text inside the list is too long it prevents the page to shrink and forces a horizontal scrollbar to show. What I'm trying to achieve is that the long description text gets shrunk, showing the 3 dots at the end (ellipsis).
The container element is displayed as flex, and the text container has flex-shrink 1, but it still refuses to shrink and overflow.
Can anybody guide me what I'm doing wrong here? Why is .mdc-list-item refusing to shrink? Is there any way to force it to shrink when necessary with just CSS?
.mdc-list-item {
flex-shrink: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.mdc-list {
display: flex;
flex-direction: column;
}<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet" />
<div style="width: 100%; max-width: 800px; margin: 0 auto; display: flex;">
<ul class="mdc-list mdc-list--two-line mdc-elevation--z1" style="flex: 1;">
<li class="mdc-list-item" title="Test Item 1 Description" channel-id="1">
<img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear">
<span class="mdc-list-item__text">
Test Item 1
<span class="mdc-list-item__text__secondary">Test Item 1 Description</span>
</span>
<div class="mdc-list-item__end-detail">
<i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button">
X
</i>
</div>
<div class="mdc-list-item__end-detail" style="margin-left: 64px;">
<i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button">
Y
</i>
</div>
</li>
<li role="separator" class="mdc-list-divider"></li>
<li class="mdc-list-item" title="Here you can read the long description of Item 2 which refuses to shrink" channel-id="2">
<img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear">
<span class="mdc-list-item__text">
Test Item 2
<span class="mdc-list-item__text__secondary">Here you can read the long description of Item 2 which refuses to shrink</span>
</span>
<div class="mdc-list-item__end-detail">
<i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button">
X
</i>
</div>
<div class="mdc-list-item__end-detail" style="margin-left: 64px;">
<i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button">
Y
</i>
</div>
</li>
</ul>
</div>
710
If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink . In use, flex-shrink is used alongside the other flex properties flex-grow and flex-basis , and normally defined using the flex shorthand.
default flex-shrink: 1; If there's not enough space available in the container's main axis, the element will shrink by a factor of 1, and will wrap its content. flex-shrink: 0; The element will not shrink: it will retain the width it needs, and not wrap its content.
The flex-grow property. The flex-grow property specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when the positive free space is distributed.
To find the shrink factor for each, multiply its flex-shrink value by its flex-basis value (1×100px or 1×400px), then divide this by the combined sum of the flex-shrink multiply the flex-basis for all items (1×100px) + (1×400px) + (1×400px).
Sometimes you need to look at all flex items (up and down the HTML structure), and check to see if they need the overflow / min-width override.
In this case, there are flex items at higher levels that still default to min-width: auto, preventing the reduction in size.
.mdc-list-item {
flex-shrink: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.mdc-list {
display: flex;
flex-direction: column;
}
/* RULES ADDED */
.mdc-list {
min-width: 0;
}
.mdc-list-item__text {
overflow: hidden;
}
.mdc-list-item__text__secondary {
text-overflow: ellipsis;
overflow: hidden;
}<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet" />
<div style="width: 100%; max-width: 800px; margin: 0 auto; display: flex;">
<ul class="mdc-list mdc-list--two-line mdc-elevation--z1" style="flex: 1;">
<li class="mdc-list-item" title="Test Item 1 Description" channel-id="1">
<img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear">
<span class="mdc-list-item__text">
Test Item 1
<span class="mdc-list-item__text__secondary">Test Item 1 Description</span>
</span>
<div class="mdc-list-item__end-detail">
<i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button">
X
</i>
</div>
<div class="mdc-list-item__end-detail" style="margin-left: 64px;">
<i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button">
Y
</i>
</div>
</li>
<li role="separator" class="mdc-list-divider"></li>
<li class="mdc-list-item" title="Here you can read the long description of Item 2 which refuses to shrink" channel-id="2">
<img class="mdc-list-item__start-detail grey-bg" style="width: 40px; height: 40px;" src="https://material-components-web.appspot.com/images/animal3.svg" alt="Brown Bear">
<span class="mdc-list-item__text">
Test Item 2
<span class="mdc-list-item__text__secondary">Here you can read the long description of Item 2 which refuses to shrink</span>
</span>
<div class="mdc-list-item__end-detail">
<i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-email" style="margin-top: -12px;" role="button">
X
</i>
</div>
<div class="mdc-list-item__end-detail" style="margin-left: 64px;">
<i class="mdc-icon-toggle material-icons color-primary-text-inv toggle-notifications-notification" style="margin-top: -12px; margin-left: -24px;" role="button">
Y
</i>
</div>
</li>
</ul>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
