Cdk virtual scrolling issue
up vote
0
down vote
favorite
Does any one met the issue of angular 7 cdk virtual scrolling working abnormally in mat-tab group.
https://github.com/angular/material2/issues/13981
My city component template looks like that
<cdk-virtual-scroll-viewport class="list-container" [itemSize]="50" minBufferPx="200" maxBufferPx="400" (scrolledIndexChange)="getNextBatch($event)">
<div *cdkVirtualFor="let state of statesObservable | async; trackBy: trackByFn" class="list-group-item state-item">
<div class="state">{{state.name}}</div>
<div class="capital">{{state.capital}}</div>
</div>
</cdk-virtual-scroll-viewport>
When put this city component to the mat-tab-group as the second tab
<mat-tab-group>
<mat-tab label="Country">
<app-country></app-country>
</mat-tab>
<mat-tab label="City">
<app-city></app-city>
</mat-tab>
</mat-tab-group>
The result looks like below:
The stackblitz code is here:
https://stackblitz.com/edit/angular7-virtual-scroll-issue
Does anyone have some idea for this issue?
angular angular7 angular-cdk
add a comment |
up vote
0
down vote
favorite
Does any one met the issue of angular 7 cdk virtual scrolling working abnormally in mat-tab group.
https://github.com/angular/material2/issues/13981
My city component template looks like that
<cdk-virtual-scroll-viewport class="list-container" [itemSize]="50" minBufferPx="200" maxBufferPx="400" (scrolledIndexChange)="getNextBatch($event)">
<div *cdkVirtualFor="let state of statesObservable | async; trackBy: trackByFn" class="list-group-item state-item">
<div class="state">{{state.name}}</div>
<div class="capital">{{state.capital}}</div>
</div>
</cdk-virtual-scroll-viewport>
When put this city component to the mat-tab-group as the second tab
<mat-tab-group>
<mat-tab label="Country">
<app-country></app-country>
</mat-tab>
<mat-tab label="City">
<app-city></app-city>
</mat-tab>
</mat-tab-group>
The result looks like below:
The stackblitz code is here:
https://stackblitz.com/edit/angular7-virtual-scroll-issue
Does anyone have some idea for this issue?
angular angular7 angular-cdk
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Does any one met the issue of angular 7 cdk virtual scrolling working abnormally in mat-tab group.
https://github.com/angular/material2/issues/13981
My city component template looks like that
<cdk-virtual-scroll-viewport class="list-container" [itemSize]="50" minBufferPx="200" maxBufferPx="400" (scrolledIndexChange)="getNextBatch($event)">
<div *cdkVirtualFor="let state of statesObservable | async; trackBy: trackByFn" class="list-group-item state-item">
<div class="state">{{state.name}}</div>
<div class="capital">{{state.capital}}</div>
</div>
</cdk-virtual-scroll-viewport>
When put this city component to the mat-tab-group as the second tab
<mat-tab-group>
<mat-tab label="Country">
<app-country></app-country>
</mat-tab>
<mat-tab label="City">
<app-city></app-city>
</mat-tab>
</mat-tab-group>
The result looks like below:
The stackblitz code is here:
https://stackblitz.com/edit/angular7-virtual-scroll-issue
Does anyone have some idea for this issue?
angular angular7 angular-cdk
Does any one met the issue of angular 7 cdk virtual scrolling working abnormally in mat-tab group.
https://github.com/angular/material2/issues/13981
My city component template looks like that
<cdk-virtual-scroll-viewport class="list-container" [itemSize]="50" minBufferPx="200" maxBufferPx="400" (scrolledIndexChange)="getNextBatch($event)">
<div *cdkVirtualFor="let state of statesObservable | async; trackBy: trackByFn" class="list-group-item state-item">
<div class="state">{{state.name}}</div>
<div class="capital">{{state.capital}}</div>
</div>
</cdk-virtual-scroll-viewport>
When put this city component to the mat-tab-group as the second tab
<mat-tab-group>
<mat-tab label="Country">
<app-country></app-country>
</mat-tab>
<mat-tab label="City">
<app-city></app-city>
</mat-tab>
</mat-tab-group>
The result looks like below:
The stackblitz code is here:
https://stackblitz.com/edit/angular7-virtual-scroll-issue
Does anyone have some idea for this issue?
angular angular7 angular-cdk
angular angular7 angular-cdk
edited 2 hours ago
Goncalo Peres
6551311
6551311
asked yesterday
rodent_la
19613
19613
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53204313%2fcdk-virtual-scrolling-issue%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password