box shadow - parent ucina efekt cienia

0

Witam.
Pomoże mi ktoś z pewną głupotą? Już mi brakuje pomysłów. Mam opakowaną listę kart w cdk-virtual-scroll. Karty mają ustawiony konkretny box-shadow. Niestety ale cień jest ucinany przez element nadrzędny.
https://imgur.com/hCnFiIx

Probowałem:

  1. padding - przesuwa mi cały virtual scroll do prawej poza "ekran"
  2. overflow (wszystkie opcje) - hidden, visible, auto. Próbowałem na elementach listy, na parentach (każdego poziomu)
  3. z-index - na elementach ustawiłem na 9999
<div style="height: 100%;">
  <cdk-virtual-scroll-viewport itemSize="10" style="height: 70vh;width: 100%;" autosize>
    <mat-card *cdkVirtualFor="let element of (data | customersPipe: [searchText])"
      style="margin-bottom: 25px;">
      <mat-card-content style="padding: 0px;">
        <div fxLayout="row" fxLayoutAlign="space-between">
          <div fxLayout="column">
            <p style="margin:0;font-size: 13px;">{{ element.name }}</p>
            <p *ngIf="element.apartmentNumber" style="margin:0;font-size: 13px;">{{ element.street }}
              {{element.buildingNumber}}/{{element.apartmentNumber}}</p>
            <p *ngIf="!element.apartmentNumber" style="margin:0;font-size: 13px;">{{ element.street }}
              {{element.buildingNumber}}</p>
            <p style="margin:0;font-size: 13px;">{{ element.city }}</p>
          </div>
          <div fxLayout="column" fxLayoutAlign="center end">
            <p style="margin:0;font-size: 16px;color:#15a19b">{{ element.vatNumber }}</p>
          </div>
        </div>
      </mat-card-content>
    </mat-card>
  </cdk-virtual-scroll-viewport>
</div>

PS.
Screen przedstawia tylko jedną stronę, ponieważ cień z lewej jest słabszy i mniej widoczne jest ucinanie. Jeśli na liście jest tylko jeden element to widać, że dolny cień też jest ucięty.

1

Ustaw: overflow: visible; na elemencie nadrzędnym i ew. nadrzędnym względem tego nadrzędnego.

p.s. A swoją drogą, to używasz templatek i jednocześnie inlinowych styli?

0

Próbowałem na elementach listy, na parentach (każdego poziomu)

Kompletnie nie reaguje na nic co w googlach udało mi się wyszukać... Większość z "rozwiązań" sugerowała właśnie zmianę overflow. To jest Angular Material.

0

Nie wiem, jak wyglądają style i nie wiem czego próbowałeś.
Obstawiam, że coś ci umknęło.

0

Liczę na to, że mi coś umknęło. Osobno w pliku .css mam tylko cień i zaokrąglanie rogów

.mat-card:not([class*=mat-elevation-z]) {
  box-shadow: 10px 25px 50px -12px rgba(0, 0, 0, 0.15);
  /* box-shadow: 0px 15px 25px 25px rgba(0,0,0,0.1); */
  border-radius: 5px;
}

Edit
Przepraszam, jest przecież jeszcze główny styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

* {
  font-family: 'Poppins', sans-serif;
}

html, body { height: 100% }
body { margin: 0; }

div .component {
  margin-top: 25px;
  margin-left: 15px;
  margin-right: 15px;
}

.error-snackbar {
  background-color: #e53935!important;
  color:white!important;
}

.success-snackbar {
  background-color: #388E3C!important;
  color: white!important;
}

div.component to są marginesy jakie dostaje cdk-virtual-scroll. Jeśli zamianie virtual-scroll na zwykłego diva to wszystko działa poprawnie. Próbowałem również narzędziami developerskimi przeglądarki bawić się stylami elementów, które są dopiero później przez Angular Material renderowane, ale też nie działa...

1 użytkowników online, w tym zalogowanych: 0, gości: 1