Angular Material : on increasing mat stepper circle size the position of line is getting changed

Question

Kindly check my code snippet stackblitz

score 1 · Answer 1 · answered Apr 20 '20 at 06:06

1

You have to manually align either the head or the separator line. For the ease, I modified the head. On file styles.scss, after line 26, add this top:-6px!important. You get the idea.

answered Apr 20 '20 at 06:06

Dragos Andrei

305
1
7

1

Thanks a lot Dragos – user2654353 Apr 22 '20 at 19:37

score 1 · Accepted Answer · answered Apr 20 '20 at 06:30

1

you can add the below styles to make it work

.mat-step-header::after, .mat-step-header::before, .mat-stepper-horizontal-line {
  top: 42px !important;
}

working example stackblitz

answered Apr 20 '20 at 06:30

Suresh Kalisetti

86
2

Angular Material : on increasing mat stepper circle size the position of line is getting changed

2 Answers2