search

BinarCode / vue-form-wizard

Vue.js 2 wizard
https://binarcode.github.io/vue-form-wizard/#/
MIT License
1.11k stars 243 forks source link

Style issue with round/square step and border / background #317

Open lk77 opened 5 years ago

lk77 commented 5 years ago

Hello,

there is an issue with the round / square step :

<div role="tab" tabindex="0" [...] style="border-color: rgba(var(--vs-primary), 1);">
    <div class="wizard-icon-container" style="background-color: rgba(var(--vs-primary), 1);">
        <i class="wizard-icon">1</i>
    </div>
</div>

The border is in one div, and the background color is on another div inside

pasted image 0

with certain resolutions, there is gaps between the border and the background color, it's best to move the background to the top div, alongside the border.

thanks.

jensvlierop commented 4 years ago

I ran into the same problem as well and noticed some differences in the CSS between my code and the example code.

For me the issue was fixed by applying the following css to the inner container:

.vue-form-wizard .wizard-icon-circle .wizard-icon-container {
    border-radius: 50% !important;
    margin: -4px;
  }