White space when rescaling a browser window, hype div in an iFrame

Responsive
1

Hi all, long time, hope everybody is doing well in these weird times. :slight_smile:

I got a problem for a some time and can't figure out a way to fix it.
I'm embedding Hype content into a forum. It works well but when sizing the browser window down, or viewing it on a phone/tablet, there appears "white" /blank space below the Hype content.

whitespace
whitespace771×720 45.6 KB

I'm using this code for the forum to display Hype:

<div id="myhypedoc_hype_container" style="margin:auto;position:relative;width:100%;height:0; padding-bottom: 25%; overflow:hidden;">

<script type="text/javascript" charset="utf-8" src="https://some-site/forum//myhypedoc.hyperesources/myhypedoc_hype_generated_script.js?6582"></script></div>

Because it's a forum the whole thing is residing in another div:

<iframe frameborder="0" height="250px" src="https://somesite/test_forum/index.php?/hype-stuff.html/" style="display:block" width="100%" scrolling="no"></iframe>
	</div>

When I use max-height, or other options the white/blank space disappears but also he bottom-half of my Hype content.

Anyone an idea how to fix this? :slight_smile:

2

what's your hypefile regarding responsive-settings like ...?
you may provide the/a hypefile and a link of the embed ...

1 Like
3

So, your green box is an iFrame? That means your Hype document can't actually set the height of its surrounding because it is contained in that iFrame. The iFrame is in control. Is there a reason you're running in an iFrame versus the direct inclusion? If you need the iFrame you will have to "communicate" your Hype document height from withing the iFrame to the surrounding Forum page managing the iFrame. Just a wild guess based on your description...

Or build a responsive Hype document that adapts to the available size if that is an option. Certainly, less complicated.

1 Like
4

@h_classen and @MaxZieb Thank you for your input! :slight_smile:

I may come back to this, Max gave me a few pointers and directions I have to investigate those first before bothering you more.

Thanks again. :slight_smile:

5

in case an iFrame is the preferred solution the https://github.com/davidjbradshaw/iframe-resizer may come in handy as it takes the scripting part for you ...

1 Like