mat-stepper not working properly with viewEncapsulation.None

Question

I have the following component setup

devis.component.ts


@Component({
  selector: 'app-devis',
  templateUrl: './devis.component.html',
  styleUrls: ['./devis.component.scss']
})
export class DevisComponent implements OnInit { }

devis.component.html

<mat-horizontal-stepper>
    <mat-step label="First step">
        <div style="height: 100%">
            content 1
        </div>
    </mat-step>
    <mat-step label="Second step">
        <div style="height: 100%;">
            content 2
        </div>
    </mat-step>
    <mat-step label="Last step">
        <div id="content" style="height: 100%;">
            content 3
        </div>
    </mat-step>
</mat-horizontal-stepper>

I want the content of the step to be full height but till then, it couldn't.

So I added the following css rules and set the viewEncapsulation to None.

devis.component.scss

mat-horizontal-stepper {
    height: calc(100% - 5rem);
}
.mat-stepper-horizontal .mat-horizontal-content-container {
    height: calc(100% - 72px) !important;
    padding: 0 !important;
    .mat-horizontal-stepper-content {
        height: 100%;
    }
}

Then the first step got styles correctly. But when I move to the other steps, nothing.

The mat-horizontal-stepper was 100% height but it's content is not even shown. The inline-style on #content is seen in the inspector but everything wrapping it is not applied.

score 0 · Answer 1 · answered Jun 12 '20 at 08:30

You just need to use the ::ng-deep to target this specific component. If you put viewEncapsulation:None this will leak your styles and eventually miss up the styles of other components (that's why its considered a bad practice)

:host {
  ::ng-deep .mat-horizontal-content-container {
      height: calc(100% - 72px);
      padding: 0;
      background: orange;
  }
}

working demo

mat-stepper not working properly with viewEncapsulation.None

1 Answers1