0

How to resize iFrame to it's content height?

asked 2011-10-17 14:22:24 +0800

gyowanny gravatar image 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 flag offensive retag edit

3 Replies

Sort by ยป oldest newest

answered 2011-10-18 21:35:25 +0800

gyowanny gravatar image gyowanny
283 1 2 6

updated 2011-10-18 21:37:22 +0800

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

link publish delete flag offensive edit

answered 2011-10-19 09:49:42 +0800

iantsai gravatar image 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!

link publish delete flag offensive edit

answered 2011-10-19 10:40:50 +0800

gyowanny gravatar image gyowanny
283 1 2 6

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

Thanks,

Gyo

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2011-10-17 14:22:24 +0800

Seen: 333 times

Last updated: Oct 19 '11

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More