The error is due to the use of relative position (and top styling). You will either need to work around these settings or, preferably, remove them all together.

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

Problem Statement

My button is being cut off by the mat-step element or so it seems.

---

What I’ve Tried

• I played around with the padding and margins of the mat-step element and it doesn’t work.
• I played around with the positioning and it doesn’t work.
• I played with the z-index but to no avail.

---

Picture of Problem

---

Explanation of Picture

As you can see, the next button is being cut off by the mat-step element, and I made sure that the problem is the mat-step. I did this by making the background of the stepper grey and found that it adjusts just fine. I made the mat-step grey, but nothing showed up, and it doesn’t adjust with any CSS. There is clearly something wrong with the mat-step.

---

My Code

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>

---

Expected Results

I want to button to function normally and to be seen completely.

---

Actual Results

The button is being cut off by the mat-step.