Questions tagged angular-cdk-virtual-scroll

Explore the latest questions and answers asked by our top developers.

Angular cdk-virtual-scroll-viewport return 0 when calling getBoundingClientRect

I have a table component which is contained inside cdk-virtual-scroll-viewport. One of the column cell contains ‘..more’ option that expands the entire row. But when scrolled up/down the row collapses due to the nature of scroll-viewport(user wants it to stay expanded). I resolved this by adding display: contents. cdk-virtual-scroll-viewport { height: 100%; min-height: 200px; display: […]

Wrong number of items when cdk-virtual-scroll is hidden by default

If the cdk-virtual-scroll is hidden by default with display:none, it shows only 4 items when it’s displayed again. I did a simple Stackblitz to reproduce the bug. If you change the value of the hideCdkVS variable to false in virtual-scroll.component.ts, it works fine. Do you know any workaround for this ? Source: Angular Material Quesions

Angular virtual scrolling

We are using Angular 10.0.9. and I just tried to add virtual scrolling to a page and followed the official documentation: Import ScrollingModule in app.module.ts Add the cdk-virtual-scroll-viewport with an itemSize and add a *cdkVirtualFor to iterate the array The browser logs the following exception (tried with different browsers): Do you guys have an idea […]

How to make cdk virtual scroll itemSize auto or change by condition

enter image description here I have this piece of code in .html file that just loops through formArray controls and displays a component. The length of formArray is by default one, and can increase or decrease over time. I want the item size to be changeable or auto. Please help me to find a way […]

Angular CDK Virtual Scroll – Items cut off at the bottom

When I scroll to the bottom of the scroll viewer, the last few items are cut off. I’m using the experimental cdk and using autoSize. <section id=”main” class=”section p-0″> <div class=”container”> <ng-container *ngIf=’allShows | async as data’> <cdk-virtual-scroll-viewport autosize [ngStyle]=”{‘height’: ‘calc(75vh)’}” class=”scroll-viewport pb-2″> <div *cdkVirtualFor=’let row of data; let idx = index; templateCacheSize:0′ class=”columns is-multiline […]

Is there a way to disable scroll in angular cdk-virtual-scroll?

I would like to prevent scrollbar from moving by default in cdk-virtual-scroll? Is there way to do it? I have been researching a lot but did not find a way to do it. Source: Angular Questions

Set width to 100% of content with CDK Virtual Scroll [Angular Material]

I try to implement a Sidenav which contains a list of Angular Material Expansion Panels. When I’m using the ngFor-directive the layout looks fine, just as i want it. As you can see in the image, it expands the view to 100% of the width of the Expansion-Panel-content. Layout using ngFor-directive. Stackblitz of how it […]

Apply CdkVirtualScroll on the content of ngContent

I have the following case in my angular app. CASE : I have a custom input select that basically do some styling and logic, and draw a list of input : (SIMPLIFIED) : <app-select> <app-option *ngFor="let country of locations$ | async" [name]="’i18n.Enum.Country’ | translate: { country: country.code }" [value]="country.code" ></app-option> </app-select> and in the app-select […]

Problems with cdkScrollable and cdkDropList inside element wrapped with ViewEncapsulation.ShadowDom element

I’ve problem with using cdk drag and drop functionality with cdkScrollable container wrapped in element with encapsulation: ViewEncapsulation.ShadowDom element. When dragged element causes list scroll, the scroll offset is not added to dragged element positioning. wrapper.component.html @Component({ selector: ‘wrapper’, … encapsulation: ViewEncapsulation.ShadowDom, }) export class WrapperComponent {} app.component.html <wrapper <div class="container" cdkScrollable> <div class="list" cdkDropList> […]

Angular Virtual Scroll Jumps around

I am using Angular Material Virtual scroll, the items get loaded correctly into the DOM, but while scrolling it happens that it jumps around and automatically jumps to the end. <cdk-virtual-scroll-viewport #scrollViewport (scrolledIndexChange)="scrolled($event)" [itemSize]="ITEM_SIZE" class="my-virtual" > <div *cdkVirtualFor="let elem of elemtArray;" class="input-field-container "> <div class="my-style" >{{elem}} </div> </div> </cdk-virtual-scroll-viewport> The output of the method scrolled […]

1 2 3 4 5

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us