Size of iframe not adjusted dynamically on embedded dashboard

Asked 1/10, 2019 at 5:58 Answered 7/11, 2023 at 13:48

We have a Qucksight dashboard that is being displayed within an iframe

<iframe src="https://ap-southeast-2.quicksight.aws.amazon.com/.../" height="3200px" overflow="auto" width="100%" frameborder="0"></iframe>

the iframe gets displayed correctly and also the dashboard appears. Now the dashboard itself has multiple tabs, whereas each tab contains different content with different length.

As seen above the height is set manually to a fixed 3200px which will result in lots of empty space for tabs with less content

Now I've tried to set the height to 100% and auto

<iframe src="https://ap-southeast-2.quicksight.aws.amazon.com/.../" height="100%" overflow="auto" width="100%" frameborder="0"></iframe>

which both gave the following result

What do I have to do to get the dashboards showing in full height which is dynamically adjusted when switching tabs?

UPDATE

Wrapping the iframe in a

<div height="100%" width="100%"><iframe...></iframe></div>

results in the following

UPDATE 2

Adding the height in the style as follows solves the issue

<iframe src="..." style="height: 100vh; width: 100%; scrolling: no; frameborder: 0"></iframe>'

but it creates a double scroll bar (one for the actual iframe and one for the page)

Skyla answered 1/10, 2019 at 5:58 Comment(0)

You can use Amazon QuickSight JavaScript SDK to generate these iframes:

https://www.npmjs.com/package/amazon-quicksight-embedding-sdk

And set height parameter to AutoFit to autoscale based on actual dashboard content height.

Example:

height: "AutoFit",
loadingHeight: '700px',

Slumgullion answered 4/10, 2019 at 8:39 Comment(0)

Removing overflow from the body of the page will disable scrolling. If your iframe occupies the entire screen, as it seems to be, just add "overflow: hidden;" in the body of the page.

body {
    overflow: hidden;
}

Check if the property is being applied, because if you use any bootstrap template it can overwrite overflow: hidden. In this case just add the "!important" in css.

Good luck!

Bombycid answered 8/10, 2019 at 13:59 Comment(0)

You can try wrapping your iframe in Div and applying height and width 100% to iframe.

Huggermugger answered 1/10, 2019 at 6:4 Comment(5)

You simply with <div style="width:100%; height:100%;"><iframe ...></div>? – Skyla 1/10, 2019 at 6:7

Yes, Try doing that – Huggermugger 1/10, 2019 at 6:8

I've tried it but the dashboard doesn't display at all anymore now – Skyla 1/10, 2019 at 6:10

Sorry I meant apply height and width to iframe and not div, Like this <div ><iframe width = "100%" height = "100%" ...></div> – Huggermugger 1/10, 2019 at 6:13

Okay it's still the same result as my last screenshot up there – Skyla 1/10, 2019 at 6:19

Puting the iframe inside of a div with height set to 100% should work. I have tried it before.

<div height="100%>
<iframe>...</iframe>
</div>

Thanks.

Interlocutor answered 3/10, 2019 at 7:59 Comment(1)

I've tried that and it squeezes the entire iframe to a very small scale, see my update above – Skyla 3/10, 2019 at 23:15

I have tried the following and it has worked!

HTML

<iframe src="..."></iframe>

... needs to be replaced with the URL

CSS

iframe {
    width: 100%;
    height: 100vh;
}

In the CSS, the height of the iframe is being set to 100% of the viewport height. (A.K.A: the height of the window)

Notes:

vh is the CSS unit for viewport height. (window height)
you can add any other property onto the iframe.
the height must be set in CSS, in another file or in style tags
the vh value can be set above 100 for more space

Hopefully, this solves your problem.

Thanks

Interlocutor answered 4/10, 2019 at 0:53 Comment(3)

Thanks that kind of worked now; the iframe doesn't have the empty space at the bottom anymore, however, there are 2 scrollbars now even though I set scrolling to no...(see updated screenshot) – Skyla 4/10, 2019 at 1:26

You are able to set the vh value above 100. Set it to something such as 125vh or whatever you see fit. Let me know if this still does not work. – Interlocutor 4/10, 2019 at 1:35

Well if I set the vh value to something above 100, then it's the same thing as setting px!? One of the tabs will have the empty space again while others don't or have a scrollbar depending on the length of the content – Skyla 4/10, 2019 at 1:42

I think it'll help you

<body style="margin: 0;overflow: hidden;height: 100vh;">
      <iframe src="..." style="height: 100%;width: 100%;border: 0;"></iframe>
</body>

Enface answered 10/10, 2019 at 6:42 Comment(0)

I'm working with AWS QuickSight Embedding SDK 2.2.2. The best solution I found is to set resizeHeightOnSizeChangedEvent option to true:

      height: "300px",
      resizeHeightOnSizeChangedEvent: true,

Unfortunately, all settings for prior versions like using loadingHeight or iframeResizeOnSheetChange etc. didn't work for me.

Typical answered 22/8, 2023 at 16:37 Comment(0)

Next JS v13.4 using the Looker SDK, in 2023

In a Next JS v13.4 project, by accident of fat fingers, the intellisense on the Looker SDK object revealed a function, not documented anywhere on the internet as far as I can tell, called .withDynamicIFrameHeight().

I tried it out and it worked straight away, Looker embed height was set dynamically and no more nasty scroll bars. Iframe integration now looks seamless in the UI.

Full example of the code that creates the Looker embed below.

async function embedder(
  element: HTMLDivElement,
  id: string | number,
  onConnect?: (dashboard: LookerEmbedDashboard) => void,
  onStart?: (event: DashboardEvent) => void,
  onComplete?: (event: DashboardEvent) => void,
  onSessionStatus?: (event: SessionStatus) => void,
): Promise<void> {
  const dashboard = await LookerEmbedSDK.createDashboardWithId(id)
    .withParams({
      // theme: "dev_theme", // When you want to preview a different theme, this should match with a theme in Looker > Admin > Themes
      _theme: JSON.stringify({
        show_filters_bar: false,
      }),
    })
    .appendTo(element)
    .on("dashboard:run:start", onStart || noop)
    .on("dashboard:run:complete", onComplete || noop)
    .on("session:status", onSessionStatus || noop)
    .withDynamicIFrameHeight()  // add this to remove scrollbars on Looker dashboard
    .build()
    .connect();

  onConnect?.(dashboard);
}

Laid answered 7/11, 2023 at 13:48 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags