Need help fixing height:auto bug

[pmochine]

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!

[TheHugoBoss]

Seems like it uses "updateRenderedHeight" before its actually rendered on older devices. Adding :delay="100" fixes this issue, it also fixes "opened" "closed" events from not firing some times

[euvl]

If you will be able to fix it, coupld you please create a PR. I have reverted some changes from the previous "improvements" - it would be great if someone will be able to look into all these issues happening

[pmochine]

@TheHugoBoss I added :delay="100", but still it won't fix the renderedHeight of 0 problem.

@euvl yes I tried to fix it somehow, but could not find the problem in the first place.

I strapped everything out what is not important. If you know laravel you can test it here. https://github.com/pmochine/VueModal-Height-Bug (you can the modal code in /resources/js/modal

[jackmcdade]

Has anyone made any progress on this issue? There have been many issues opened that seem to stem from the same systemic problem with height/top/absolute position calculations.

• #335
• #294
• #282
• #197
• #177

[pmochine]

@jackmcdade I tried to fix it, but I just could get a solution to this problem...

[jackmcdade]

@pmochine so have I, with no luck. :(

[jackmcdade]

Still trying to figure this one out. @euvl do you have any ideas?

[jackmcdade]

Bueller? I would be happy to try to fix this myself if I had an idea on where to start...

[bigbasspic]

Any news on this? I am running in some kind of similar problem: When resizing the browser-window, the style:top property is calculated wrong (not 0 but -XXXpx) on the div "v--modal-box v--modal" Miscalculation happens when I resize the browser-window by 1px (width). Reproducible in Chrome, Safari and Firefox on mac/OSX and on IE11 and Edge on windows. Freshly loaded: Window-width resized by 1px:

[DennisMaass]

Any news on this? I am running in some kind of similar problem: When resizing the browser-window, the style:top property is calculated wrong (not 0 but -XXXpx) on the div "v--modal-box v--modal" Miscalculation happens when I resize the browser-window by 1px (width). Reproducible in Chrome, Safari and Firefox on mac/OSX and on IE11 and Edge on windows. Freshly loaded: Window-width resized by 1px:

I have the same problem as @bigbasspic Is there any fix?

[saltymouse]

In my case, I needed to force a height re-render on each opening of my modal to make it adapt to the new content's height. I was able to do this using refs and emptying the "renderedHeight" in the beforeOpen event like so:

<template>
  <modal
    ref="listing"
    name="listing"
    :adaptive="true"
    width="100%"
    :maxWidth="900"
    height="auto"
    :scrollable="true"
    @before-open="handleBeforeOpen"
  >
    <my-dynamic-content />
  </modal>
</template>

<script>
export default {
  name: "ListingModal",
  // ... other scripty component stuff
  // ...
  methods: {
    handleBeforeOpen() {
      this.$refs.listing.modal.renderedHeight = "";
    },
  },
};
</script>

[ton77v]

I had problems with "height: auto + scrollable" since one of the updates, the height was calculated wrong

Fixed that using CSS rule that overrides the height set by JS: .my_modal { .vm--container.scrollable { .vm--modal { height: auto !important; } } }