Vue-js-modal: height="auto" wrong top position

[Archiolidius]

For some reason, it sets a wrong top value (bigger than needed) so modal is not centered correctly.
I use height="auto" and :scrollable="true"
I don't have any other css which can impact this modal window position

Any ideas what can it be?

[euvl]

Hey @Archiolidius, looks like it was positioned to 1/2 height of the screen.
I will look into it, but a quick fix for you will be to use :pivot-y="0.3" which will push it to 30% top instead of 50%.

Also does the behaviour persist if you do not use scrollable?

[euvl]

Hey again, so I think this behaviour more or less is correct, if you will need to set a "top" of the modal, use pivot-y as discussed. The problem is that if it is scrollable, the height is set to 0 as far as content (and it's height) is dynamic.

[Archiolidius]

@euvl Thanks, pivot-y works perfect to me.

[Archiolidius]

@euvl I just noticed that, despite <modal name="xxx" height="auto" :scrollable="true" pivot-y="0.3"> works correctly, it throws following console error:

[euvl]

@Archiolidius Pivot Y is a Number type value, so will have to use v-bind:, e.g. :pivot-y="0.3"

[Archiolidius]

@euvl ah, right.. Thanks!

[jennapederson]

I'm experiencing the same issue and maybe I'm misunderstanding the usage.

When I have height="auto" but use the scrollable default of false (because I don't want it scrollable), I have to use :pivot-y=".25" to get it _somewhere near the center_ of the page.

It feels like if I'm using height="auto" and no scrollable that the default position should be in effect, without having to force pivot-y.

Thoughts?

[jennapederson]

Here's an example where this occurs - https://github.com/jennapederson/todo-list/blob/master/src/components/TodoList.vue

I can remove height="auto" and it's where I expect, however with height="auto" the modal is properly sized.

Thanks for looking!

[euvl]

The way that it works now helped me to "stick" it to the top when the content expands(e.g. modal does not expand in both directions, only to the bottom) in an easy way without breaking other functionality.

I will take a look what i can do.

[davidm-public]

version 1.2.11

when height is set to auto, then the top of the modal is positioned at 50%.

This is irrespective of scrollable, it happens with both scrollable true and false.
ie: it behaves as if pivot-yis 50%.

Changing pivot-y does change the behaviour.

It does seem that setting height to auto is broken in implementation, and possibly in semantics too.

[euvl]

@davidm-public the default pivot-y is 0.5 as you've mentioned.
I will be happy to review your PR that fixes height auto.

[wmcmurray]

Am I the only one who thinks this behaviour is inconsistent ?

If I define the height to a number value with a pivot-y of 0.5, the modal will be placed at the center of the screen as I expect. If I change the pivot-y to 0, the modal will align it's top with the top of the window instead of just showing it's bottom half because the pivot is at it's center.

This is good behaviour to me. I expect this behaviour and it's very easy to handle.

Why when setting height to auto and pivot-y to 0.5 should the modal align it's top to the middle of the screen ? If I use height = auto it's because I can't predict the height of my content, so how will I be able to predict the proper pivot-y to make it properly centred ?... :thinking:

[euvl]

@wmcmurray, @davidm-public and others,

Guys, the only thing i can do right now is to remove "auto" support at all if it is confusing (including scrollable as it relies on it).

I will be happy to review PRs, tests, etc but I do not have enough time to work on the solution that will satisfy absolutely everyone.

It is an open source after all and I am in the middle of changing jobs and moving flats. So the reality is that if you have any issues with the way it works, please try to fix it.

Again, I will gladly look thought the solution that works nicely with other flags (particularly draggable and resizable) but I am fairly tired to read comments that imply that I MUST do changes.

[euvl]

Hey everyone,

@DaxChen has fixed the issue, now when height=auto, modal will be repositioned based on it's actual height.

Cheers 👍
Published in + [email protected]