-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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,
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
Asked: 2011-10-17 14:22:24 +0800
Seen: 333 times
Last updated: Oct 19 '11