vue-good-wizard
vue-good-wizard copied to clipboard
wrong mobile detect with bootstrap modal
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 https://github.com/xaksis/vue-good-wizard/blob/f4424111206fb0f23489b8cc6aea2cb0770a0b03/src/components/Wizard.vue#L166
@serkandyck Did you ever find a work-around for using vue-good-wizard inside a bootstrap modal?
@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.