lowestElement does not resize from larger to smaller height in VUE2

[Programina]

trafficstars

Describe the bug I have taken into consideration other issues posted here and found a suitable way to implement the resizer. In my example I create the iframe once and then it remains mounted, but I change up the content dynamically on routing. The frame does resize, using this directive:

 Vue.directive('resize', {
    bind: function (el, {
      options = {
        heightCalculationMethod: 'lowestElement',
        maxHeight: 1000,
        scrolling: true
      }
    }) {
      el.addEventListener('load', () => iframeResize(options, el))
    }
  });

However, neither lowestElement nor any other heightCalculationMethod, resizes from larger to smaller height in VUE2 (regardless of Browser, I've tested in Chrome and Firefox). (Scrolling doesn't do anything to the iframe either).

I expected the Resizer to work both ways, especially because from the options descriptions on the heightCalculationMethod function, it sounded like this was the purpose of most of them. Might I have missed something?

[davidjbradshaw]

Yeah it should work in both directions. When it doesn't it down to CSS issues and the different sizing methods are their to try and work around those problems.

My suggestion would be to check your CSS to see if you have an element that doesn't shrink. If you can not fix it that way then your options are to use taggedElement and place a tag at a point on the page that does reduce in height, or write your own custom sizing method in the iframe

[maxfi]

My suggestion would be to check your CSS to see if you have an element that doesn't shrink.

@Programina try including the following CSS in the page that you're loading into the iframe:

html, body {
  height: auto;
}

Chances are that something is setting height: 100% which causes the issue.

Reference: https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/troubleshooting.md#iframe-not-downsizing