Как предотвратить скачки контента на экране при переключении отображения ползунка коврика

Question

Если я наведу курсор на значок громкости, появится коврик-слайдер

что сдвигает весь контент вниз, как я могу предотвратить это?

Воспроизводится в этом примере Stackblitz

<div>Hover on below icon to see jumping</div>

<span class="volume-controls"
          (mouseover)="showVolSlider = true"
          (mouseleave)="showVolSlider = false">

      <button mat-icon-button
              (click)="toggleMute()">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT34nN7TXRgBVDzlAXnsLNkKK-oxUSRDgfV0RXrudKTH8ivIUcQ" style="height: 20px">
      </button>

      <span class="slider-wrapper" [hidden]="!showVolSlider">
        <mat-slider></mat-slider>
      </span>

</span>

Answer 1

Все, что вам нужно, это добавить в файл SASS

.mat-icon-button{
    padding-top:8px;
  }

По умолчанию объем добавляет 8 пикселей к верхнему отступу. зеркальное отображение, которое позволит избежать повторного выравнивания

.volume-controls {
    .mat-icon-button{
        padding-top:8px;
      }
...

Что касается вашего второго вопроса, все, что вам нужно сделать, это установить размер вашего контейнера. Думаю, это будет проще:

  .volume-controls {
    display:block;
    height:55px;
    max-height:55px !important;

Демо Stackblitz