Description
I finally found out the problem of the bug in #282.
I took me a while, but the problem is that the modal does not know what the height of the model is.
The problem occurs in Modal.vue at trueModalHeight().
It is said that:
if (isAutoHeight) {
// use renderedHeight when height 'auto'
return this.modal.renderedHeight
}
But for the very first time return this.modal.renderedHeight return 0, because only after the modal is rendered we can calculate the real height in updateRenderedHeight().
But it's too late for the transition and that is why it's jumping from the bottom instead from the top.
A simple example to see the error is with this example modal:
<modal name="hello-world" transition="nice-modal-fade" height="auto">
<div style="padding: 50px;">
Hello World
</div>
</modal>
You will see for the first time that the modal is coming from the bottom, but if you are hiding it and opening it again you will see the correct height.
My first solution is to guess the slots height, before the user is opening the modal for the first time.
Because in data() we set this as default height:
modal: {
width: 0,
widthType: 'px',
height: 0,
heightType: 'px',
renderedHeight: 0 // <--- problem
},
I'm trying to find a solution to this and opening a thread in Stackoverflow.
If someone has any idea how to render the slot into a div so we can calculate the height, I would appreciate it. Thanks!