Кнопка отсекается мат-шаговым элементом - PullRequest
Новая
       6

Кнопка отсекается мат-шаговым элементом

0 голосов
/ 19 февраля 2020

Постановка проблемы

Моя кнопка обрезается элементом mat-step или так кажется.

Что я имею Пробовал

  • Я играл с отступами и полями элемента mat-step, и он не работает.
  • Я играл с позиционированием, и это не ' t работа.
  • Я играл с z-index, но безрезультатно.

Изображение проблемы

enter image description here

Объяснение рисунка

Как видите, следующая кнопка отсекается элементом 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.

1 Ответ

1 голос
/ 20 февраля 2020

Ошибка связана с использованием относительного положения (и стиля верха). Вам нужно будет либо обойти эти настройки, либо, желательно, удалить их все вместе.

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

...