wrong mobile detect with bootstrap modal

[serkandyck]

if wizard in bootstrap modal first render on vgw-mobile class i think this function calculte on wizard-body inline div and bootstrap modal has < 620 pixel maybe we need good catch mobile pixel calculating here

vue-good-wizard/src/components/Wizard.vue

Line 166 in f442411

this.isMobile = this.$refs['wizard-body'].clientWidth < 620;

[AndrewWestberg]

@serkandyck Did you ever find a work-around for using vue-good-wizard inside a bootstrap modal?

[jmwebslave]

@AndrewWestberg I have found a workaround, but it's not a great one.

The problem is not actually the width of the modal primarily (although that could be a problem later). Instead, the problem is that when your page renders the modal is there but hidden, and as a result the clientWidth parameter will return 0. The only time this parameter is re-evaluated is when the window resize event is fired, but the display of a modal is not sufficient to do that since displaying a modal doesn't actually resize the window. You can verify this by resizing your browser window while the modal is visible and observing that you'll get the proper display.

A not-perfect workaround for this is you can write a function to fire the resize event yourself when your modal is made visible.

To do so, add the @shown= event handler to your modal like;

<b-modal :id="modalID" :ref='modalID' :name="modalID" @shown="resize()" size="xl" ok-only ok-variant="secondary" ok-title="Cancel">

And create a method in your component called resize;

methods: {
  resize() {
        let evt = document.createEvent('UIEvents');
        evt.initUIEvent('resize', true, false,window,0);
        window.dispatchEvent(evt);
      }
}

Now, when you display your modal for a fraction of a second you'll get the incorrect rendering, and then it'll show in the correct width.