Unnecessary .wizard-header gives extra padding

[jsinhSolanki]

hi, I would like to submit issue regarding wizard-header. Even if I don't need header(title and subtitle) there's empty div with the class of .wizard-header. This results in extra space above my wizard.(padding: 15px)

So, I suggest you add v-if in header div to check whether we provided title and subtitle or not.

[SlyDave]

Basically same as https://github.com/BinarCode/vue-form-wizard/issues/332 See comment https://github.com/BinarCode/vue-form-wizard/issues/332#issuecomment-576365015

[SlyDave]

I stand corrected, even if you use the slot, the .wizard-header is there with the padding.

lame work around, adding the following style to your competent: It seems it doesn't work if you scope the style, not worked out why yet.

<style>
    .vue-form-wizard .wizard-header {
        padding: 0 !important;
        border-radius: 0 !important;
    }
</style>

[eyalch]

@SlyDave If you want to use a deep selector with <style scoped> you need to add >>>, like so:

<style scoped>
.vue-form-wizard >>> .wizard-header {
  padding: 0;
  border-radius: 0;
}
</style>

Or with a CSS preprocessor (SCSS in my case):

<style scoped lang="scss">
.vue-form-wizard::v-deep {
  .wizard-header {
    padding: 0;
    border-radius: 0;
  }
}
</style>

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Also, I'm not sure the !importants are needed anymore, so I removed them.

[ggondim]

So many workarounds for a simple header-disabled feature. This surely is a must have.