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>

score 1 · Accepted Answer · edited Nov 19 '19 at 15:43

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

edited Nov 19 '19 at 15:43

dota2pro

7,220
7
44
79

answered Nov 15 '19 at 23:34

Dalorzo

19,834
7
55
102

Thanks, but it still pushes the content below it https://stackblitz.com/edit/angular-8qwyy5-f6gsmi?file=src/app/slider-overview-example.scss – dota2pro Nov 16 '19 at 00:38

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

1 Answers1