时间戳

首页 > 解决方案 > 按钮被 mat-step 元素切断

html - 按钮被 mat-step 元素切断

问题描述

问题陈述

mat-step我的按钮似乎被元素切断了。

我试过的

问题图片

在此处输入图像描述

图片说明

如您所见，下一个按钮被mat-step元素切断，我确定问题出在mat-step. 我通过将步进器的背景设置为灰色来做到这一点，发现它调整得很好。我做了mat-step灰色，但什么都没有出现，而且它没有用任何 CSS 进行调整。显然有问题mat-step。

我的代码

CSS

.stepper {
  position: relative;
  top: 50px;
}

.stepBtns {
  position: relative;
  font-size: 20pt;
  padding: 10px 30px;
  box-sizing: border-box;
  border: 1px solid #000000;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 16px;
  text-align: center;
  top: 50px;
}

HTML

<mat-horizontal-stepper class="stepper">
    <!-- Step 1 -->
    <mat-step>

      <button class="stepBtns" mat-raised-button matStepperNext>Next</button>
    </mat-step>

    <!-- Step 2 -->
    <mat-step>

      <button class="stepBtns" mat-raised-button matStepperPrevious>Back</button>
      <button class="stepBtns" mat-raised-button matStepperNext>Next</button>
    </mat-step>

    <!-- Step 3 -->
    <mat-step>

      <button class="stepBtns" mat-raised-button matStepperPrevious>Back</button>
      <button class="stepBtns" mat-raised-button matStepperNext>Next</button>
    </mat-step>

    <!-- Step 4 -->
    <mat-step>

      <button class="stepBtns" mat-raised-button matStepperPrevious>Back</button>
      <button class="stepBtns" mat-raised-button matStepperNext>Next</button>
    </mat-step>

    <!-- Step 5 -->
    <mat-step>

      <button class="stepBtns" mat-raised-button matStepperPrevious>Back</button>
      <button class="stepBtns" mat-raised-button matStepperNext>Next</button>
    </mat-step>

  </mat-horizontal-stepper>

预期成绩

我想按按钮正常运行并被完全看到。

实际结果

按钮正在被mat-step.

标签： htmlcssangularangular-materialstyling

解决方案

该错误是由于使用了相对位置（和顶部样式）。您将需要解决这些设置，或者最好将它们全部删除。

StackBlitz： https ://stackblitz.com/edit/angular-mat-stepper-program-jgsasc

推荐阅读