Наложение кладки в угловых 7 - PullRequest
Новая
       16

Наложение кладки в угловых 7

0 голосов
/ 03 апреля 2019

Я использую каменную кладку в своем угловом приложении: https://www.npmjs.com/package/ngx-masonry

Моя проблема в том, что некоторые элементы перекрываются: enter image description here

Когда я изменяюРазмер окна вручную выглядит неплохо: enter image description here

Есть идеи, как это исправить?

module.ts 

import { NgxMasonryModule } from 'ngx-masonry';
imports: [ NgxMasonryModule]

component.html 

<ngx-masonry class="row small-gutters">
     <div ngxMasonryItem *ngFor="let evento of eventos | async" class="py-0 grid-five col-lg-3 col-md-4 col-sm-6 col-6 my-2">
            <div class="aviso">
                <a [routerLink]="['/evento', evento.id]" class="text-white">
                    <img src="{{ evento.imagen }}" class="rounded" alt="{{ evento.titulo }}" width=100%>
                    <div class="pt-1 pt-md-2 d-flex align-items-start">
                        <div class="fechaThumbnail d-none d-lg-block">
                            <h4 class="dia">{{ evento.fechaInicio.toDate() | date: 'dd' }}</h4>
                            <h6 class="mes">{{ evento.fechaInicio.toDate() | date: 'LLL' | uppercase | slice:0:3 }}</h6>
                        </div>
                        <div>
                            <h6 class="font-weight-light mb-0 text-primary">{{ evento.titulo | truncate: 42 }}</h6>
                            <div class="small font-weight-light op-50 mt-1">
                                <span class="d-none d-lg-block">{{ evento.direccion | truncate: 25 }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
 </ngx-masonry>

1 Ответ

0 голосов
/ 18 мая 2019

Чтобы избежать проблем с наложением, вы должны добавить следующий код в тег ngx-masonry [useImagesLoaded] = "true"

Пожалуйста, прочитайте комментарии для фактического тега

Примечание: я также сталкивался с такими же проблемами наложения.

Надеюсь, это поможет вам.

...