angular контейнер полосы прокрутки сжимается при группировке - PullRequest
Новая
       22

angular контейнер полосы прокрутки сжимается при группировке

1 голос
/ 08 мая 2020

Я пытаюсь реализовать Perfect Scrollbar в моем проекте angular, но по какой-то причине, когда я добавил текст прямо над ним, он сам сжался. Если я избавлюсь от текста выше, он станет нормальной стороной (применены мои ширина и высота).

Я помещаю эти два внутри mat-grid-tile. какие-нибудь предположения о том, что происходит? Я попытался изменить высоту полосы прокрутки, но ничего не изменилось. 

    <mat-grid-tile [rowspan]="5" [colspan]="7">
      <div>
        <div>
          <p style="margin-bottom: 240px; margin-right: 250px; font-weight: bold; font-size: 12px; ">Workspaces</p>
        </div>
        <perfect-scrollbar style="background-color: white; border-radius: 5px; font-size: 5px;">
          <div>
            <button mat-stroked-button style="width: 135px; height: 25px; margin: 20px; font-size: 8px; margin-top: 10px; padding-bottom: 30px;">Filter by super Tags</button>
          </div>
        </perfect-scrollbar>
      </div>

Вот как это выглядит сейчас

1 Ответ

0 голосов
/ 08 мая 2020

Вот репродукция на Stackblitz

А вот код на случай, если stackblitz не работает: 

<mat-grid-list cols="7" rowHeight="1:1">
  <mat-grid-tile [rowspan]="5" [colspan]="7">
      <div>
        <div>
          <!-- removed : margin-bottom: 240px; margin-right: 250px; font-weight: bold; font-size: 12px; -->
          <p style="">Workspaces</p>
        </div>
         <!-- Added: height: 200px, it's required -->
        <perfect-scrollbar style="background-color: white; border-radius: 5px; height: 200px;">
          <div>
            <div>coucou</div><br>
            <div>coucou</div><br>
            <div>coucou</div><br>
            <div>coucou</div><br>
            <div>coucou</div><br>
            <div>coucou</div><br>
            <div>coucou</div><br>
            <div>coucou</div><br>
            <div>coucou</div><br>
            <div>coucou</div><br>
            <button mat-stroked-button style="width: 135px; height: 25px; margin: 20px; font-size: 8px; margin-top: 10px; padding-bottom: 30px;">Filter by super Tags</button>
          </div>
        </perfect-scrollbar>
      </div>
  </mat-grid-tile>
</mat-grid-list>

Это то, что вы хотели сделать?

Также вы должны перенести свой стиль в файл css, его будет намного легче читать.

...