切换垫滑块的显示时如何防止内容在屏幕上跳跃

Question

如果我将鼠标悬停在音量图标上，它会添加一个垫子滑块

这会压低整个内容，我该如何防止这种情况？

<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;
  }

默认情况下，音量在顶部填充中添加 8px。避免重新对齐的镜像

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

关于您的第二个问题，您只需固定容器的大小即可。我想这将是更简单的方法：

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

Stackblitz Demo

切换垫滑块的显示时如何防止内容在屏幕上跳跃

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

html

css

angular

mat-slider