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:
- padding - przesuwa mi cały virtual scroll do prawej poza "ekran"
- overflow (wszystkie opcje) - hidden, visible, auto. Próbowałem na elementach listy, na parentach (każdego poziomu)
- 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.