box shadow - parent ucina efekt cienia

Odpowiedz Nowy wątek
2020-03-26 13:51

Rejestracja: 2 lata temu

Ostatnio: 3 godziny temu

Lokalizacja: Jastrzębie-Zdrój

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.

edytowany 1x, ostatnio: cerrato, 2020-03-26 14:27
@cerrato: celowo nie ustawiłem html bo według mnie ten fiolet jest nieczytelny... Błagam o wybaczenie 🙄 - AdamWox 2020-03-26 14:28
Zostało Ci wybaczone ;) Myślałem, że to przeoczenie, a nie celowe działanie. Jak wolisz to ze spokojem śmiało poprawiaj. - cerrato 2020-03-26 14:30

Pozostało 580 znaków

2020-03-26 14:54

Rejestracja: 2 lata temu

Ostatnio: 59 minut temu

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?


edytowany 1x, ostatnio: Freja Draco, 2020-03-26 14:56

Pozostało 580 znaków

2020-03-26 14:58

Rejestracja: 2 lata temu

Ostatnio: 3 godziny temu

Lokalizacja: Jastrzębie-Zdrój

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.

edytowany 1x, ostatnio: AdamWox, 2020-03-26 14:59

Pozostało 580 znaków

2020-03-26 15:10

Rejestracja: 2 lata temu

Ostatnio: 59 minut temu

0

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


Pozostało 580 znaków

2020-03-26 15:12

Rejestracja: 2 lata temu

Ostatnio: 3 godziny temu

Lokalizacja: Jastrzębie-Zdrój

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 "[email protected]/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...

edytowany 1x, ostatnio: AdamWox, 2020-03-27 07:58

Pozostało 580 znaków

Odpowiedz

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