How to resize iFrame to it's content height?

gyowanny
283 1 2 6

Hi Guys,

I have the following structure in my page:

   <iframe>
<div>
<iframe>


That page is mounted at runtime as well as the iframes which receive the content vi .setSrc() method.
My problem is that the iFrames aren't getting the same height as their contents so that the vertical scrollbars are being displayed.

Is there a way to make the IFrames get the same height as their content?

Thank you,

delete retag edit

3 Replies

gyowanny
283 1 2 6

Ok,

I've found myself the solution.

It's a pretty simple script that must be fired into the onBind event of the component's widget listener. Something like the code below:

Iframe frame = new Iframe();
frame.setWidth("100%");
frame.setStyle("border: none;overflow:hidden;");
frame.setSrc("sub_page.html");
frame.setScrolling("no");
//Here is the trick. The script sets the frame's height as it's content's scrollHeight plus 8 maybe 10 pixels.
frame.setWidgetListener("onBind", "var f = document.getElementById('"+frame.getUuid()+"');f.height=f.contentWindow.document.body.scrollHeight+8;");


NOTICE 1: The code above has been tested only for pages belonging the same domain. Not sure it works for cross domain pages.
NOTICE 2: I tested the solution in a .java class but in a .zul file. However I believe it's pretty easy to do that in a zul file.

Thank you,

Gyo

iantsai
2755 1

Good to see you got the answer, by the way, have you ever tried ZK Fiddle yet? it can helps you to demonstrate your code on-the-fly!

gyowanny
283 1 2 6

Hi,
I've never try that before.
Will take a look.

Thanks,

Gyo

[hide preview]