Size of iframe not adjusted dynamically on embedded dashboard

user_1606657 0
Viewed 2350

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

enter image description here

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

enter image description here

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

enter image description here

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)

enter image description here

iframe html
6 Answers
user_121634070

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!

user_66506770

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

user_67924850

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.

user_119869630

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

user_119869630

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>
user_78735830
Related