Search code examples
asp.netiframeheightmodalpopupextender

Issue adjusting iframe height when opened as popup using ModalPopupextender


I am using a ModalPopupextender Ajax Control to open aspx page in a modal Popup. aspx page is opened in a iframe as shown in below code.The content which is loaded in iframe is dynamic hence I cannot give a fixed height to iframe. I want that I should be able to adjust the height as per the content every time popup is being opened. I have a function to resize the iframe height and I am using that successfully on my other pages where iframe gets populated in the window itself but not able to adjust the height when iframe is opened in a POPUP. I have already tried window onload, iframe onload events without any success.

     <asp:ModalPopupExtender ID="ModalPopupExtender2" BackgroundCssClass="transparentBG"
        runat="server" CancelControlID="ButtonCancel" OkControlID="ButtonDone" 
        TargetControlID="btnAddNew" PopupControlID="DivAddWindow" Drag="true"  >
     </asp:ModalPopupExtender>
     <div class="popup_Buttons" style="display: none">
      <input id="ButtonDone" value="Done" type="button" />
      <input id="ButtonCancel" value="Cancel" type="button" />
     </div>
     <div id="DivAddWindow" style="display: none;">

     <iframe id="IframeEdit" scrolling="no" src="MasterPage.aspx"  width="700px">
    </iframe>
   </div>

I would really appreciate if somebody can lead me the solution to resolve this.


Solution

  • Try this:

     <iframe id="IframeEdit" onload="iframeLoaded()" scrolling="yes" src="MasterPage.aspx"  width="700px">
    </iframe>
    

    following javascript function would get height from the iframe content.

    <script type="text/javascript">
    function iframeLoaded() {
        var iFrameID = document.getElementById('IframeEdit');
    
        if (iFrameID) {
            iFrameID.height = "";
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
        }
    }
    </script>  
    

    I checked it in even ModalPopupextender, it works.