Embedding height is not dynamic

[JasonStrazisar]

Describe the bug

When embedding a dashboard, and using a "dynamic" iFrame resize, like iFrameResizer, the height of the html is always expending, but never shrinking when it change, due to the use of height: 100%; instead of height: auto; on the metabase html tag.

Enregistrement.de.l.ecran.2024-01-09.a.11.59.18.mov

But, when I change the height to auto, it work as excepted:

Enregistrement.de.l.ecran.2024-01-09.a.12.01.21.mov

To Reproduce

• Using a metabase embedding.

Expected behavior

No response

Logs

No response

Information about your Metabase installation

- macOS 14.1 (23B2073)
- chrome 120.0.6099.129
- metabase: metabase-enterprise:v1.47.7

Severity

Annoying but not blocking

Additional context

No response

[albertoperdomo]

Hello @JasonStrazisar ,

just to double check: This is using what type of embedding, public, static or interactive?

[paoliniluis]

Similar/related to #30634 ?

[JasonStrazisar]

Hello @JasonStrazisar ,

just to double check: This is using what type of embedding, public, static or interactive?

Hey ! This is on interactive embedding

[albertoperdomo]

Thanks @JasonStrazisar,

have you tried using postMessage to dynamically adjust the iframe? I don't think iframeResizer is supposed to work for interactive embedding.

[JasonStrazisar]

Hey @albertoperdomo !

Yes I tried using postMessage with the 'fit' mode, the only problem, is that the only message the embedd send is with the frame mode set to 'normal', I never get a 'fit' frame mode, is there something to setup before doing it on metabase ? I looked through the documentation, but I didn't found if there was something to do (apart from setting up the listener)

[bertrandjamin]

Hi @albertoperdomo I work with Jason and we are still stucked with this issue.

Did you fund time to check why the 'fit' event doesn't occur on our side ?

cc @paoliniluis

[saqib-airflip]

I have the same issue.

[bitshadow]

Hello @JasonStrazisar ,

just to double check: This is using what type of embedding, public, static or interactive?

I can confirm exact behaviour is happening for static embedding as well. We are using iframe-resizer-react.

      <IframeResizer
        key={src}
        // heightCalculationMethod="taggedElement"
        sizeHeight
        src={src}
        log
        style={{
          width: '1px',
          minWidth: '100%',
          border: 'none',
        }}
      />

[albertoperdomo]

Many folks on this issue were using interactive (full-app) embedding. For that, the recommended setup is to listen for the 'fit' event with postMessage. This has been fixed in #40841. The fix has also been backported and is available in releases 49.4 and newer.

[albertoperdomo]

What's your issue with static @bitshadow and what version are you using?

[bitshadow]

What's your issue with static @bitshadow and what version are you using?

When using the iframe-resizer-react it is supposed to downscale height automatically. It scales iframe to max height but doesn't downscale height. Is there a way to achieve it with static embedding?

It works fine when I set the Metabase html tag height inside iframe to auto instead of 100%. But we can't modify iframe styles because of limitations.

Screen.Recording.2024-04-17.at.5.05.58.PM.mov

Version Information:

• macOS 14.2 (23C64)
• Chrome 123.0.6312.107 (Official Build) (arm64)
• metabase: metabase-cloud:v1.48.6

[paoliniluis]

@bitshadow move to the latest version and it should work