Comments (19)
Sure. But I'd like to use large modals. And I don't know in advance what's the size of the window of the user. Some have small screens, some have Retina displays. I've made some changes (struggling a bit) to allow to specify a string percentage to width and height. PR is following.
from vue-js-modal.
Alternatively we can just put a warning that adaptive, min-height, min-width
do not work with %, but i would be rather inclined for us to finish it ✨
from vue-js-modal.
Merged into master
from vue-js-modal.
Yep, tested and published. v1.2.4 is up 😄
from vue-js-modal.
Currently it is pixels 👍
from vue-js-modal.
Great work! I will review as soon as I will be able to 👍
Thanks a lot for your PR! 🥇
from vue-js-modal.
We just ran into this issue, for now I've just forked onekiloparsec's work and we're pointing at that. We did run into 2 other problems, but they are minor, namely we had to override the classes to undefined to stop height being set and if the window scales down, it doesnt adaptively scale back up.
from vue-js-modal.
Hey @joel-petersen , @onekiloparsec
Its a very useful change, I agree. But I cannot merge the PR if it breaks other features. As you've mentioned - adaptively does not work well and I was going to fix it myself but I do not have enough timer for it due to work/life activities.
If anyone can make sure that nothing is broken by PR (e.g. bugs fixed and both old and new features work without obvious bugs) I will merge it to master A$AP.
🍺 👍
from vue-js-modal.
As far as I can tell, there is mostly this auto
feature to be fixed, in the new parsing of height prop, and making sure it works, no? Shouldn't be a great deal. @joel-petersen instead of forking my fork, wouldn't it be better for you to push directly into my PR?
from vue-js-modal.
@onekiloparsec You are right, pushing in PR is a good idea.
Also feel free to delete "auto" at all, sorry that i forgot to answer in the PR 😭
from vue-js-modal.
@euvl you can already push to the PR, since the little checkbox "allow edit from maintainers" is checked. As for @joel-petersen I'll add him as collaborator to my fork.
One last thing: could you provide a few more details about what you mean when you say "adaptively does not work well"? What did you have in mind? Isn't the percentage thing a answer to that problem already?
Thanks
from vue-js-modal.
There is a flag adaptive
, it does not let the modal to get out of the screen borders, for example if the screen width is 320px and modal is 400px, it will try to resize modal to 320px (good for phones).
I've noticed that it does not seem to work when the size is set with %. Also i think we should make sure that if the size is, for example, 999%
(#yolo) and adaptive is true
, plugin would round it to 100%.
draggable
works perfectly fine and i've tested resizable
, it works too, but we should discuss what the desired behaviour should be. For example, in the situation when width is set to 60%
and the modal is resized a bit, should it stick to a new size (in pixels) or it should recalculate new width in percents.
I've added a test modal to demo folder, you can try all those flags 🍺 😄
from vue-js-modal.
Also I dont think that min-width, min-height seem to work with %.
But again, don't get me wrong, PR is great, and the feature is great, we just have a few last touches to do 👍 👯
from vue-js-modal.
Sure no problem, and really nothing to worry about. Just let us know if you want us to help more, or battle-test it more in our own context.
from vue-js-modal.
@onekiloparsec If you have spare time to carry on work on this feature - i will be very happy about 😄 Otherwise, I will try finishing it over upcoming weekends
from vue-js-modal.
That was quick. Thanks a lot. Haven't tested yet, but will do ASAP.
from vue-js-modal.
Cool, thanks. I did not release the version to npm btw.
I've also tweaked width/height string value parsing a bit. Now values like 600, '600', '600px' (transformed to {type, value} obj` will mean the same as well as '600%' will be transformed to {type: '%', value: 600}. Think it might be helpful for the future improvements.
And I've moved your trueModalWidth/trueModalHeight methods to computed values.
from vue-js-modal.
Cool, thanks. I did not release the version to npm btw.
Will you?
As for the rest, this is clearly much more finished work than my quick fix.
from vue-js-modal.
Hello, sorry to "revive" here, but I would like to know if there is any method so that I can change the width of an active modal.
Eg:
this.$modal.width('modalName', '500px')
something along those lines. Thanks and sorry for the inconvenience
from vue-js-modal.
Related Issues (20)
- delete vm--overlay background opacity
- Disabling the escape key handler HOT 3
- The function of closing the modal window on Esc has no reactivity HOT 1
- vue3 support HOT 1
- Cannot read properties of undefined (reading '$modal') HOT 5
- Modal is not scrollable when adaptive is true HOT 1
- How to set border-radius HOT 1
- Problem with styles in component inside modal call
- vee-validate validation not working once wrapped with vue-js-modal
- Unable to preventDefault inside passive event listener due to target being treated as passive HOT 1
- Got "Incorrect or missing password" when installing this package HOT 1
- text-align on v-modal causes problems in RTL languages
- Can add the close button dynamically?
- Incorrect documentation on Events section
- TypeError: Cannot read properties of undefined (reading 'show') HOT 2
- Clunky behaviour on reloading pages with SSR nuxt HOT 1
- Preventing multiple modals opening at the same time HOT 2
- TypeError: undefined is not an object (evaluating 'e.prototype.$modal')
- Create for version three
- vue-js-modal supporting vue js 3latest version 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-js-modal.