Comments (2)
@serkandyck Did you ever find a work-around for using vue-good-wizard inside a bootstrap modal?
from vue-good-wizard.
@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.
from vue-good-wizard.
Related Issues (20)
- Anyway to disable final save button HOT 3
- Failed to mount component: template or render function not defined HOT 1
- Demo link broken? HOT 3
- async/await with next/back HOT 1
- specify starting step? HOT 1
- IE 11 Compatibility HOT 1
- textarea overwritten by previous step HOT 4
- Style color overrides
- Would like to have a 'Completed' step HOT 1
- Cancel on first step button
- Typescript Support
- Compiled error
- Callbacks for goTo, goNext, nextClicked, and backClicked
- Events like onNext onBack HOT 2
- Kitchen sink example HOT 2
- Uncaught TypeError: [] is not a function
- disableNext doesn't actually disable anything by default
- after next step previous steps data is blank
- Vue 3 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-good-wizard.