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

Question

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

它将整个内容向下推，我该如何防止这种情况发生？

此Stacklitz示例中可再现

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

Stacklitz演示