Ionic Virtual Scroll Long Label is not cutting off correctly

Issue

I am updating an ionic app that uses angular that contains a list view of property names with checkboxes. There can possibly be ~1300 items in the list. Using a traditional list view with so many items takes too long to open the view and initialise all the elements, but the formatting on the list view is correct. If the name is too long then it is cut of with ellipsis at the end. As shown below in the screenshot.

The code for the above list view is given below:

<ion-content [fullscreen]="true" class="ion-padding-top">
<ion-list>
    <ion-item *ngFor="let property of observableProperties | async; let i = index" class="ion-no-padding">
        <ion-label>{{ property.name }}</ion-label>
        <ion-checkbox [(ngModel)]="property.isSelected" [id]="property.id" slot="end" (click)="propertySelected(property.id)"></ion-checkbox>
    </ion-item>
</ion-list>

The ion-label has no css applied to it, and displays correctly.

I decided to use virtual scroll as outlined in this documentation: angular virtual scroll documentation

This fixes the issue with taking so long to open the view and I get an instant response, but the formatting is not right for long names. Long names are not cut off and instead extend the element beyond the screen so that you have to scroll horizontally to get to the checkbox. Because the element is reused over the list view, when you scroll to the vicinity of the long name all elements near it have the same long label length too. The gif below highlights this:

The code for the above gif is:

<ion-content [fullscreen]="true" class="ion-padding-top">
<cdk-virtual-scroll-viewport itemSize="56" minBufferPx="900" maxBufferPx="1350">
<ion-list>
    <ion-item *cdkVirtualFor="let property of observableProperties | async" class="ion-no-padding">
        <ion-label fixed>{{ property.name }}</ion-label>
        <ion-checkbox [(ngModel)]="property.isSelected" [id]="property.id" slot="end" (click)="propertySelected(property.id)"></ion-checkbox>
    </ion-item>
</ion-list>
</cdk-virtual-scroll-viewport>

I have tried adding formatting to the ion-label in the element through the fixed parameter but that didn't change anything. I've also tried adding the following css to the ion-label but nothing changed.

ion-label {
margin: 0;
display: block;
overflow: clip;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: inherit;
text-overflow: ellipsis;
white-space: nowrap;

}

That didn't solve the problem. How can I use virtual scroll, but still have my ion-label cut off for long text correctly, to the size of the screen?

Solution

There is a known bug with the cdk-virtual-scroll-viewport when applying css to elements with overflow found here - https://github.com/angular/components/issues/24277 However, if you apply the angular pseudo-class ::ng-deep to the .cdk-virtual-scroll-content-wrapper like the below example it will allow you to modify view encapsulated css classes

::ng-deep .cdk-virtual-scroll-content-wrapper { max-width: 100%;}

Answered By - Zerth00