Question

From within my SharePoint environment I have to use a Page Viewer to load a custom HTML form into an iframe. Everything works find except for the fact that the layout is set to a forced width. Meaning the left and right sides of the screen a pretty much open. I’m pretty good with CSS and even overriding selectors, but I have not researched on how to make iframes and its children, responsive in layout design. How can we make it happen from scratch with jquery?

I pretty much want the width of my iframe to be as wide as its parent container and the ability to scroll longer content too. I know its more than just a 100% width. Plus will this work for mobile devices – which is my end goal.

any small examples?

Thanks!

Answer 1

To get the browser’s width:

$(window).width();

To get the window’s height:

$(window).height();

To set the width of your iframe’s width and height (assuming there is only one):

$('iframe').height($(window).height());
$('iframe').width($(window).width());