Allow for rendering the progress line between the steps instead of starting outside

[Coreusa]

Currently the line that shows progress starts before the first step and continues through it whenever the user proceed. It would be nice to allow controlling this behaviour, so it could go between them instead.

Compare

To:

Additionally, the steps seem to center in each of the boxes that are rendered, instead of being distributed. This would also be nice to control, in effect making the very first step render to the left and the very last step render to the right.

Compare:

To:

More info on distributed alignment from the Bootstrap docs.

Would it make sense to allow for controlling these behaviours through props?

[cristijora]

Hi @Sobient I think this is a good proposal. Have you tried doing it with css?

[sidyamamoto]

Well, I don't know about @Sobient, but I've tried to adjust with only css and no success. The progress bar always starts with width: 12.5%.

I've tried this method (https://steemit.com/utopian-io/@alfarisi94/how-to-make-step-progress-bar-only-using-css), But even if I set display:none to the progress bar and tried to set the bar only with css pseudo selectors like :after another problem occurs. The "active" class is only applied to the current li element and the past ones don't get a marker to say that the past ones are already ok.

[dohahelmy]

This can be achieved by CSS by th following scss rules.

.wizard-nav-pills {
    justify-content: space-between;
    >li {
        flex: 0;
        >a {
            width: fit-content;
        }
     }
}

and then adjust .wizard-progress-with-circle left and right margins to suitable percentages.

The issue now is how much the with of the progress increase. I didn't figure how to change the method somewhere away from the internal JS! Help needed if someone can offer a solution.