Stepper css and webix template

Webix JS
1

Hi,
I’m trying to make an html stepper, I’ve tried the code here
https://snippet.webix.com/c6tt1501
In an html page, it works perfectly but in a webix template view the line between the steps won’t appear.
I can’t figure out why.
Any ideas ?

Thanks

2

Hello!

The problem is in z-index - when its value is -1, the line hides behined the view. So it’s enough to set z-index for .stepper li:after more than that, e.g. 1, and also you need to set z-index for .stepper li:before which will be more than .stepper li:after, e.g. 2 (note that you’ll also need to set the position (e.g. relative) for z-index to work in this case).

Please chech the example: Code Snippet

3

Hi,
Thank you very much for the explanation !
It works perfectly now.

Have a nice day

1 Like