Use Virtual Scroll in image gallery

user_12302230 0
Viewed 400

I'm trying to implement a virtual scroll in my image gallery. My problem is that the implementation doesn't work correctly. First, the elements are displayed in vertical position, when in fact they should respect the horizontal breakpoints and only then respect the vertical scroll. Second, with the scroll elements appear with huge spacing.

Does anyone know how I can solve this problem? thanks

DEMO

HTML

<div [ngSwitch]="viewMode" style="height:100%; width:100%">
  <div id="tab2" *ngSwitchCase="'tab2'" style="height:100%; width:100%">
    <div
      style="margin-left: 16px; margin-right: 16px;height:100%; width:100%"
      class="first"
    >
      <ng-container
        *ngIf="
          arrayDeNomesCategorias.length == 0 ||
          arrayDeNomesCategorias == undefined
        "
      >
        <ul
          class="mdc-image-list my-image-list"
          style="height:100%; width:100%"
        >
          <cdk-virtual-scroll-viewport
            itemSize="50"
            style="height:100%; width:100%"
          >
            <ng-container *cdkVirtualFor="let i of images; let j = index">
              <li class="mdc-image-list__item">
                <div class="mdc-image-list__image-aspect-container">
                  <img
                    src="https://material-components-web.appspot.com/images/photos/3x2/{{
                      i + 1
                    }}.jpg"
                    class="mdc-image-list__image"
                  />
                </div>
              </li>
            </ng-container>
          </cdk-virtual-scroll-viewport>
        </ul>
      </ng-container>
    </div>
  </div>
</div>

Problem

img1

Correct, but without the implemented scroll :(

img2

angular-material angular typescript css html
1 Answers

I updated your example here.

Your problem was mainly css and there seem to have been (at least) 2 problems:

  1. Your are giving .mdc-image-list__item class min-height: 400px and max-height: 400px. That basically means that all your .mdc-image-list__item containers will have 400px height (so height: auto is kind of useless). Removing this will remove the white space between your images.

  2. If you want to have scroll as well as elements on the same page you should use a flex container with flex-wrap: wrap.

In order to do this I used the following snippet (for your case):

:host ::ng-deep .cdk-virtual-scroll-content-wrapper {
  display: flex;
  flex-wrap: wrap;
}

You can read more about host and ng-deep here. But please be aware that according to this article (and not only) is recommended to avoid using it in recent version of angular. For the sake of simplicity I used it on your example but you might want to avoid it in production.

  1. (extra) : As a small improve I also removed the duplicated margin: 10px; height: auto; max-height: 400px; properties from .mdc-image-list__item media queries (and only leaved the initial one with no media query). It will be applied anyway since there isn't anything to overwrite it and just changing just the with on the media queries should be enough.
user_64296740
Related