Components: About Virtual Scrolling

[MunMunMiao]

What is the expected behavior?

What is the current behavior?

https://youtu.be/0E0x8kqPRp4

If "grid-template-columns" is used, an error will occur in height, Cancel the normal use of "grid-template-columns"

What are the steps to reproduce?

<div class="gallery">

    <cdk-virtual-scroll-viewport [itemSize]="400" [minBufferPx]="400" [maxBufferPx]="400" class="gallery-wrap">

        <div class="gallery-items">

            <gallery-img *cdkVirtualFor="let item of items;templateCacheSize: 0;" class="gallery-item" [item]="item"></gallery-img>

        </div>

    </cdk-virtual-scroll-viewport>

</div>

.gallery-wrap{
        width: 100%;
        height: 100%;

        .gallery-items{
            width: 100%;
            display: grid;
            grid-template-columns: repeat(auto-fit, 300px);
            grid-template-rows: repeat(auto-fit, 400px);
            grid-gap: 50px;
            justify-content: center;
        }

        .gallery-item{
            width: 300px;
            height: 400px;

            img{
                width: 100%;
            }
        }
    }

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

AngularJS: 7
AngularJS Material: 7.2.1
OS: MacOS 10.14.2
Browsers: Chrome 71.0.3578.98

Is there anything else we should know?

[anthowm]

I have the same problem when trying to have more than one column per row the virtualScroll does not work correctly (the difference is that I use bootstrap).
I have something like this

HTML

<cdk-virtual-scroll-viewport itemSize="400" >
                <div class="container mt-4 mb-4">
                    <div class="row">
                        <h1 class="main-heading">{{ 'pets.list.title' | translate }} Virtual Version</h1>
                    </div>
                    <div class="row" [ngClass]="routeAnimationsElements">
                        <div class="col-12 col-md-6 col-lg-6" *cdkVirtualFor="let pet of pets ; let index = index; trackBy: petsTrackByFn"
                            [ngClass]="{'item-size': (index+1)%2===0}" data-testid="pets-list">
                            <mat-card>
                                <a (click)="onViewPet(pet.id)">
                                    <mat-card-header>
                                        <mat-card-title>{{pet.name}}</mat-card-title>
                                        <mat-card-subtitle>{{pet.type}}</mat-card-subtitle>
                                    </mat-card-header>
                                    <img mat-card-image src="http://localhost:4000/{{pet.imageUrls[0].path}}" alt="Photo of a {{pet.name}}">
                                </a>
                                <mat-card-actions>
                                    <button mat-button [ngClass]="routeAnimationsElements">{{ 'pets.list.like' |
                                        translate
                                        |
                                        uppercase }}</button>
                                </mat-card-actions>
                            </mat-card>
                        </div>
                    </div>
                </div>
            </cdk-virtual-scroll-viewport>

CSS

cdk-virtual-scroll-viewport {
    height: 80vh;

    .item-size{
      height: 400px;
    }
    // Bonus points
    &::-webkit-scrollbar {
      width: 1em;
    }

    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }

    &::-webkit-scrollbar-thumb {
      background-color: rgb(238, 169, 79);
    }
  }

I put item-size each 2 items but this make work like in you video, with only 1 column work like a charm...
I dont know what is missing :(

[MunMunMiao]

@anthowm probably because "grid-template-columns" caused some problems with the document stream.

[filipemendes1994]

Any development related with this?

[MunMunMiao]

@filipemendes1994 no，I gave up

[anthowm]

@filipemendes1994 You can try this if you want virtual scroll https://github.com/orizens/ngx-infinite-scroll

[filipemendes1994]

I was looking for a Material solution. In fact, this feature already exists for an entire year but it stills very unusable and hard to integrate with various components...

[anthowm]

well I try to figure with it 1 month and i just give up, no one care about the component so ...
and the package i send to you is compatible with material components.

[RalucaC]

I am interested in having a Material solution for this, too. Is there any work started or plans for it?

[SvenBudak]

I found an example how to wrap a div around 2 or more items: https://stackblitz.com/edit/angular-k7qjle?file=app%2Fapp.component.html

but it dosnt work for me with *cdkVirtualFor

[mmalerba]

I think this issue is asking about supporting multiple items per row? In which case it's a duplicate of https://github.com/angular/components/issues/10114

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}