Styling Issues with navigation line about angular-wizard HOT 9 CLOSED

I don't really know what's going on. Were you able to solve this?

from angular-wizard.

No, I switched from a wizard type deal to just a simple form using angular-formly thanks!

from angular-wizard.

@mgonto I solved this by changing

.steps-indicator li a:before {
    left: calc(43%);
}

to

.steps-indicator li a:before {
    left: calc(46%);
}

But I only tested it in Chrome, so I don't know about other browsers.

from angular-wizard.

This line:

&:before {
  left: ~'calc(50% - 7px)';
}

is being converted to

&:before {
  left: calc(43%);
}

There's nothing wrong with the code; it's happening due to a bug in recess that causes the LESS compilation to aggressively (and incorrectly) perform the calculation on this line.

You might want to switch the build over to grunt-contrib-less. In the interim, the easiest workaround is to just override that property in your own CSS:

.steps-indicator li a:before {
  left: calc(50% - 7px);
}

from angular-wizard.

@jacobscarter can you check this one if you have time? @kentcdodds is using it with Angular Formly, and it'd be lovely to fix it.

Otherwise, I'll check it out next week :).

Thanks everyone for all the help in finding the issue!

from angular-wizard.

Here's the working example: http://angular-formly.com/#/example/other/angular-wizard

from angular-wizard.

So the fix is changing from recess to grunt-contrib-less.

Sounds good

from angular-wizard.

@mgonto about to push the fix and update the package

from angular-wizard.

Great work @jacobscarter :). Thanks!

@kentcdodds can you update the sample for Angular-formly?

Cheers!

from angular-wizard.