Primeng: vertical alignment of p-steps component

[alialtun14]

[x] feature request

[In the present case] (https://www.primefaces.org/primeng/#/steps) there is no class to use p-steps in vertical alignment mode.
I think it will make the component more useful if there is such an option.

[sudheerj]

+1 from my side. Also If we have more steps then it is good to have vertical alignment than horizontal.

[Ketec]

i happened to look at it (going to need it soon), did a search and end up here. It is rather simple tho with a simple override:
Ether globally:

 .ui-steps-item {
  float:none !important;
}

or in component:

 :host /deep/ .ui-steps-item {
  float:none !important;
}

[cagataycivici]

Sounds good.

[Pranavism]

with .ui-steps-item {
float:none !important;
}
how to get the horizontal line across steps to align vertically?
it remains horizontal in middle of vertical div

[sotoh]

It seems interesting but now we have Timeline Component.

[stephanie-dm]

With PrimeNG 11, the previous "float: none" workaround doesn't seem to work anymore.
I managed to accomplish a vertical layout with the following CSS (inside a component):

:host ::ng-deep .p-steps-item {
  padding-bottom: 15px;
}

:host ::ng-deep .p-steps ul {
  display: block;
}

:host ::ng-deep .p-steps .p-steps-item:before {
  content: none;
}