angularangular-materialangular-material-8

Horizontally scroll Angular Material Stepper form header items

I have an Angular Material Stepper form and I have 15 steps on it. As there are a lot of steps, the header text is shrinking down and the text cannot be seen. Please refer to the image below:

enter image description here

I am trying to set a fixed width to each header item and as well as make the header horizontally scrollable like it does in Material Tabs. The code I have used is below:

StackBlitz

Please help me get this done.

Solution

  • Important Add CSS in style.css https://stackblitz.com/edit/angular-swzbpn

    .mat-horizontal-stepper-header-container {
  width: fit-content !important;
}