Inconsistent labels in vertical stepper
aman54kumar opened this issue · 2 comments
Hi,
First of all thanks for this very versatile stepper.
I am working on a project which requires a number of steps to be implemented (10+). I would like a responsive stepper out of the box, but nevertheless adding the vertical class for smaller screens as of now. But, The stepper labels are inconsistent. Sometimes they appear horizontally in front of the circle, and sometimes below it. Any suggestion on how to make it look even?
Hi @aman54kumar,
You're welcome 👍
Can you share a live reproduction of your issue? It'll be easier to help you 👍
You can use CodePen/JS Bin or Stackblitz.
Hi @Johann-S ,
here is the codepen for this issue. -> https://codepen.io/stan24/full/vYYmyKv
Try to change the view to phone screen(I am looking at 520x800 right now). Longer step labels seem to be taking a new line below the circle icon, while shorter ones are in front of the circle icon in the same line, Similar to the screenshot in my first comment. My suggestion is that, if one of the labels can't fit in the same line as the circle icon, then the longer as well as every other shorter label should follow the pattern of using a new line below the step circle to make the view consistent.
There is also an issue of step contents in small screen having a separate div below the previous one, which makes the form look very awful. You can see the same in the codepen I shared by going to the next steps. Is there a way to make the contents appear in the same position in the screen as we move to the next steps? Any suggestions to resolve this would be greatly appreciated.
Thanks.