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 bel enter image description here ow:

The stackblitz code is here:
https://stackblitz.com/edit/angular7-virtual-scroll-issue

Does anyone have some idea for this issue?

edited 2 hours ago

Goncalo Peres

6551311

asked yesterday

rodent_la

19613

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 bel enter image description here ow:

The stackblitz code is here:
https://stackblitz.com/edit/angular7-virtual-scroll-issue

Does anyone have some idea for this issue?

edited 2 hours ago

Goncalo Peres

6551311

asked yesterday

rodent_la

19613

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 bel enter image description here ow:

The stackblitz code is here:
https://stackblitz.com/edit/angular7-virtual-scroll-issue

Does anyone have some idea for this issue?

edited 2 hours ago

Goncalo Peres

6551311

asked yesterday

rodent_la

19613

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 bel enter image description here ow:

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

edited 2 hours ago

Goncalo Peres

6551311

asked yesterday

rodent_la

19613

edited 2 hours ago

Goncalo Peres

6551311

asked yesterday

rodent_la

19613

edited 2 hours ago

Goncalo Peres

6551311

edited 2 hours ago

Goncalo Peres

6551311

edited 2 hours ago

Goncalo Peres

6551311

asked yesterday

rodent_la

19613

asked yesterday

rodent_la

19613

asked yesterday

rodent_la

19613

add a comment |

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

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

Name

active

oldest

votes

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk