I am using cdk-virtual-scroll-viewport to dynamically render items a small set at a time as the user scrolls.
The viewport only displays 5 items, regardless of the height given to the cdk-virtual-scroll-viewport element.
In the component, I load an array of 100 strings.
Each item is 48px in height. The viewport is set to 480px in height. So, I expect to see 10 items at a time. It only renders 5.
In the html:
<cdk-virtual-scroll-viewport itemSize="48" class="viewport">
<mat-option *cdkVirtualFor="let person of filteredPersons"
[value]="person" class="animated slideInRight">
<div class="option-user">
<img class="image-cropper"
src="......"
alt="User Picture" />
{{person}}
</div>
</mat-option>
</cdk-virtual-scroll-viewport>
In the css:
.viewport {
height: 480px;
}
.option-user {
height: 48px;
display: flex;
flex-direction: row;
align-items: center;
}
Take a look at this example angular-virtual-scroll-example
if you have any other problem share an example.
I had the same bug and just fixed increasing default values of minBufferPx
and maxBufferPx
.
Add the following in global file
cdk-virtual-scroll-viewport {
height: 100%;
width: 100%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.