How to prevent content jumping on screen when toggling display of mat slider

Question

If I hover on the volume Icon it adds a mat-slider

which pushes the whole content down, how can I prevent this ?

Reproducible in this Stackblitz example

<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

All you need is to add to your SASS file

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

By default the volume add 8px to the top padding. mirroring that will avoid the re-align

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

About your 2nd question all you have to do is fixed the size of your contaier. I guess that will be the simpler way:

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

Stackblitz Demo