Skip to content

Change the size of a pop-up window based on the size of the content page within the control's iframe.

License

Notifications You must be signed in to change notification settings

DevExpress-Examples/asp-net-web-forms-popup-control-resize-popup-window-based-on-content-page-size

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Popup Control for ASP.NET Web Forms - How to resize the pop-up window based on to the content page size

This example demonstrates how to change the size of a pop-up window based on the size of the content page within the control's iframe.

Resize the pop-up window based on the content

Overview

Handle the popup control's client-side Init event. In the handler, call the control's GetContentIFrame method to get the control's iframe and attach the OnContentLoaded event handler to the iframe's Load event.

function onPopupInit(s, e) {
    var iframeElement = s.GetContentIFrame();
    ASPxClientUtils.AttachEventToElement(iframeElement, 'load', function (event) {
        onContentLoaded(event, s)
    });
}

In the OnContentLoaded event handler, calculate the size of the content page within the iframe and specify the pop-up window's size based on this calculation.

function onContentLoaded(e, popup) {
    var array = calculateSize(popup, popup.GetContentIFrame(), popup.GetContentIFrameWindow().document);
    popup.SetSize(array[0], array[1]);
}
function calculateSize(popup, popupiframe, contentDocument) {
    var windowElement = popup.GetWindowElement(-1);
    var scrollX = contentDocument.documentElement.scrollWidth;
    var scrollY = contentDocument.documentElement.scrollHeight;
    var offsetX = windowElement.offsetWidth - popupiframe.offsetWidth;
    var offsetY = windowElement.offsetHeight - popupiframe.offsetHeight;
    var width = scrollX + offsetX;
    var height = scrollY + offsetY;
    if (window.navigator.userAgent.indexOf("Edge") > -1) {
        width += 10;
        height += 10;
    }
    var array = [width, height];
    return array;
}

Files to Review

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)