Vue-js-modal: Set width and height as div/parent/window percentage?

[onekiloparsec]

Hi. I'd like to set the width and height of the modal in a more dynamic/responsive way. Would it be possible to set the values as percentage of something (probably window size)?

[euvl]

Currently it is pixels 👍

[onekiloparsec]

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.

[euvl]

Great work! I will review as soon as I will be able to 👍
Thanks a lot for your PR! 🥇

[joel-petersen]

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.

[euvl]

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.

🍺 👍

[onekiloparsec]

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?

[euvl]

@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 😭

[onekiloparsec]

@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

[euvl]

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 🍺 😄

[euvl]

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 👍 👯

[euvl]

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 ✨

[onekiloparsec]

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.

[euvl]

@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

[euvl]

Merged into master

[onekiloparsec]

That was quick. Thanks a lot. Haven't tested yet, but will do ASAP.

[euvl]

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.

[onekiloparsec]

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.

[euvl]

Yep, tested and published. v1.2.4 is up 😄

[garbinmarcelo]

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