CODEWITHSUNDEEP
angularmat-stepper
cucuru
cucuru

Reputation: 3698

how to set full-height to a the mat step content

I have an some horizontal steppers in my app, and I would like to set in one of them the content height to 100%.

I'm not able to do it

<div style="height: 500px; border: 2px solid blue;">
 <mat-horizontal-stepper #stepper fxFlexFill style="background: red">
   <mat-step label="Step 1" fxFlexFill>
     <div style="border: 2px solid green;" fxFlexFill>
       test size 
     </div>
   </mat-step>
   <mat-step label="Step 2" fxFlexFill>
     <div style="border: 2px solid green;" fxFlexFill>
        test size 
      </div>
   </mat-step>
 </mat-horizontal-stepper>
</div>

I guess that updating mat-horizontal-content-container and .mat-horizontal-stepper-content classes should work, but then the rest of my steppers will be affected. Is it a way to do it?

There is a working example

https://stackblitz.com/edit/angular-zcvugh?file=src%2Fapp%2Fapp.component.html

Upvotes: 6

Views: 8667

Answers (2)

Reza Taba
Reza Taba

Reputation: 1904

This solution doesn't do it for only one of the steppers, however, in case anyone wanted to apply a height to all of them, this is the solution that has worked for me as of today with Angular Material 18.

SCSS:

::ng-deep .mat-horizontal-stepper-wrapper {
    height: 100%;
    background-color: purple;

    .mat-horizontal-content-container {
        height: 100%;
        background-color: aqua;
    }

    .mat-horizontal-stepper-content {
        height: 100%;
        background-color: pink;
    }
}

OR CSS

::ng-deep .mat-horizontal-stepper-wrapper {
    height: 100%;
    background-color: purple;
}

::ng-deep .mat-horizontal-content-container {
    height: 100%;
    background-color: aqua;
}

::ng-deep .mat-horizontal-stepper-content {
    height: 100%;
    background-color: pink;
}

NOTES:

  • As for Angular Material the above is enough. However, do NOT forget to make the parents' or children divs to height: 100% as well or it might not work following the plain CSS rules.
  • If using SCSS make sure ::ng-deeps are outside of any braces as they won't work inside the ordinary SCSS braces!

Upvotes: 0

Mile Mijatović
Mile Mijatović

Reputation: 3177

I hope this solution will help you

<div fxLayout style="height: 95%">
    <mat-horizontal-stepper fxLayout="column" fxFlex="100" fxLayoutAlign=" stretch" #stepper style="background: #DDD">
        <mat-step label="Step 1" fxFlex="100"  fxLayout="column">
            <div style="border: 2px solid green;" fxFlex="100">
                <div fxFlex="100" fxFill style="border: 2px solid red;">
                    Step 1: must fill the entire space
          <p>Issues? <a href="mailto:&#103;&#105;&#116;&#104;&#117;&#098;&#064;&#116;&#111;&#110;&#121;&#115;&#097;&#109;&#112;&#101;&#114;&#105;&#046;&#105;&#116;">Text me!</a>
                </div>
            </div>
        </mat-step>
        <mat-step label="Step 2">
            <div style="border: 2px solid green;height:100%;">Step 2: must fill the entire space too, but it's shifted down!</div>
        </mat-step>
        <mat-step label="Step 3">
            Step 3: This is even more shifted!
        </mat-step>
        <mat-step label="Step 4">
            Step 4: ...
        </mat-step>
    </mat-horizontal-stepper>
</div>

StackBlitz

Upvotes: -2

Related Questions