The line to the left of the sphere

[LRJasmine]

How can I move the line to the left of the sphere to start at the first sphere instead of before it?

[parsajiravand]

Hello my friend you can setup your custom style inside progress bar like this:

.wizard-progress-with-circle { left: 100px; } also if you wanna handeling width line of progress you can customize with this class .wizard-progress-bar

[LRJasmine]

This works when I tried to make the edits in the console. I am using Vuejs and laravel.

.wizard-progress-with-circle { left: 100px !important; } This works in the component style tag but not with scoped

.wizard-progress-bar { width: 80% !important; } This is not causing a change in the vue file at all.

Put both of those in a scss file and not changing either

[parsajiravand]

you can set your custom class out side of the scoped css in vue like this:

.custom-form-wizard{
   .wizard-progress-with-circle {
    left: 100px !important;
   }
  .wizard-progress-bar {
   width: 80% !important;
  }
}

[LRJasmine]

Setting the wizard-progress-bar with to 80% isn't quite the fix I was hoping for. Because the width of the line is dynamically calculated, pushing over the line by 100px, extends it to the right which I don't want and setting it to 80% fixes the width to the end of the fourth tab. What I'm actually looking for is to cut off the excess line to the left but keep the width moving from sphere to sphere.

[parsajiravand]

you can write your dynamic style calc like this: calc($size/2) + 5px;

[parsajiravand]

Hi my friend, your issue are solved or not? @LRJasmine