Cross Browser Issue (iframe Sizing)
I am displaying pages from an external site (that I own) in an iframe
in one of my pages. It's all fine except when viewed in Opera
with the browser window size reduced (not widescreen), when the iframe
shrinks and squashes the content. It works in widescreen (maximize browser window), and is OK in IE7, Firefox, Chrome
and Safari
in maximize and reduced window size.
I have set the frame dimensions in the HTML and have nested the iframe
in a div
which is larger than the iframe
via the css.
Is this a peculiar bug to Opera or is there something I can do about it?
Answer
We had a similar issue with iframe
sizing on our web app main page, although in IE6. The solution was to trap the window.onresize
event and call a JavaScript function to appropriately size the iframe
. content
is the name of the iframe
we want sized. Also note that we are using ASP.Net AJAX's $get
which translates to document.getElementById()
window.onresize=resizeContentFrame;
resizeContentFrame();
function resizeContentFrame() {
setFrameHeight($get('content'));
}
function setFrameHeight(f) {
if(isDefined(f)) {
var h=document.documentElement.scrollHeight;
h-=(HEADER_HEIGHT+CONTENT_PADDING+5);
f.style.height=h+'px';
}
}
Related Questions
- → October CMS create a multi select Form field
- → How to update data attribute on Ajax complete
- → laravel blade templating error
- → should I choose reactjs+f7 or f7+vue.js?
- → How to dynamically add class to parent div of focused input field?
- → Setting the maxlength of text in an element that is displayed
- → Undefined Result for Variable with Javascript innerHTML function
- → Expanding search bar not expanding before search
- → Get the calling element with vue.js
- → Blade: how to include a section in one page but not in another
- → How to print/log reactjs rendered dom?
- → how to write react component to construct HTML DOM
- → How to add a timer in HTML5 and Javascript?