Here is a code example I've forked from the official angular documentation for stepper: https://stackblitz.com/edit/angular-tth817
In my fork, I'm trying to achieve a couple of things:
I want to hide the stepper header.
- I've tried doing this by styling
.mat-horizontal-stepper-header-container
(actually just adding a border to it).
- I've tried doing this by styling
I forced the content of the last step to be tall. There, you can see that the buttons on each step no longer align. What I would like to do is have the stepper content fill its parent (
.container
, the thick red dashed line), and then I can use flex box to get the buttons to all align at bottom.- I added
mat-stepper-horizontal, mat-stepper-horizontal
rules, and these don't apply either.
- I added
Can you tell me:
Why aren't these rules appearing at all? (F12 developer tools, shows all the other rules, but not that ones that are stepper specific). What's going on here?
Generally - what philosophy should I use for styling the stepper? The best alternative I can think of, is to put a content div inside each step, and size it with vh and vw or something.
How would I get rid of the header?