CODEWITHSUNDEEP
cssgoogle-chromeiframeresizeautosize
BhavikKama
BhavikKama

Reputation: 8800

Why chrome every time increase the height of the iframe with 10px when iframe load?

<button class="btn btn-success" id="opener" onclick="ValidateReport('<%=generatecampaign%>','<%=loading_img_path%>','<%=IS_HTML%>','Campaign_Report');">Preview</button>

Above is my preview Button

following is my iframe whhich load some html in iframe and resize the iframe with the data in html file which will be loaded in iframe

<div class="bordercolor" id="mydiv" style="display: none; text-align: center">

    <IFRAME SRC="" id="reportpreview"  style="text-align: center; clear:both;"
        marginheight="0" frameborder="0" onLoad="sizeFrame();"></iframe>
        <iframe id="myIFrm" src="" style="display: none;"> </iframe>
</div>

Above is my Iframe which is loads the html file in and resize the iframe content as per the html file content...and when there is no html file then simply just load one static html file with one label name as "No data Available"

my problem is when i use chrome and when i want to load the html file..it automaticaly increase the height of iframe 10pt. continously on pressing the preview button.but why its not clear the previous height value when i try to resize the iframe height...

following is my sizeFrame() function in javascript which invoke on iframe onLoad

function sizeFrame() {

    var F=null;
     F = document.getElementById('reportpreview');
    if(F.contentDocument) {
        F.height=0;
    F.height = F.contentDocument.documentElement.scrollHeight+10; //FF 3.0.11, Opera 9.63, and Chrome
    } else {


        F.height=0;
    F.height = F.contentWindow.document.body.scrollHeight+10; //IE6, IE7 and Chrome

    }

    }

Upvotes: 0

Views: 601

Answers (2)

Abhinav Kulshreshtha
Abhinav Kulshreshtha

Reputation: 2205

Use a css reset and reset the value for iframe.
Something like iframe{ margin:0 padding:0 height:0 width:0}. I had previous nightmare experience where web-kit browser added few px to make the room for the scroll bars. Since then i started using a proper css-reset in my project, even thou it adds overhead.

Upvotes: 2

Kowo
Kowo

Reputation: 32

first need to reset iframe at default like this :

iframe { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

Upvotes: 1

Related Questions