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
Correct, but without the implemented scroll :(
CodePudding user response：
I updated your example here.
Your problem was mainly css and there seem to have been (at least) 2 problems:
Your are giving
.mdc-image-list__itemclassmin-height: 400pxandmax-height: 400px. That basically means that all your.mdc-image-list__itemcontainers will have 400px height (so height: auto is kind of useless). Removing this will remove the white space between your images.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.
- (extra) : As a small improve I also removed the duplicated
margin: 10px; height: auto; max-height: 400px;properties from.mdc-image-list__itemmedia 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.