Responsive issue.

[hifall]

When there are enough (>=5) steps on the form, and the page width is small enough, the horizontal line begins to break.

This is reproducible in the official basic demo in jsfiddle.

[cristijora]

Hi @hifall Unfortunately for now there is not easy way to place the tabs vertically on small screens. One thing you can do if you have many tabs is to reduce their size https://jsfiddle.net/bt5dhqtf/3750/ step-size="sm" You could do that conditionally based on screen size.

[jensvlierop]

One thing you can do if you have many tabs is to reduce their size https://jsfiddle.net/bt5dhqtf/3750/ step-size="sm" You could do that conditionally based on screen size.

I found an easy way of doing this is using the VueMq library and passing the value as the step size prop

After installing the library you can define the breakpoints for each screen size:

import VueMq from 'vue-mq'

Vue.use(VueMq, {
  breakpoints: { // default breakpoints - customize this
    sm: 450,
    md: 1200,
    lg: Infinity
  },
  defaultBreakpoint: 'md' // customize this for SSR
})

Then you can pass the value generated by the mq library to the form-wizard: <form-wizard :step-size="$mq">