-
Notifications
You must be signed in to change notification settings - Fork 43
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
wrong mobile detect with bootstrap modal #22
Comments
@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. |
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
The text was updated successfully, but these errors were encountered: