Page Control for ASP.NET Web Forms - How to display the page control in full screen mode (100% width and height)

This example demonstrates how to adjust the size of the page control to the size of the browser window.

Overview

Set the body element's paddings and margins to zero.

body, html {
    padding: 0;
    margin: 0;
}

Set the control's Width property to 100% and specify the control's initial height. Optionally, set the control's Paddings.Padding property to 0px to disable default offsets and paddings.

<dx:ASPxPageControl ID="pc" runat="server" Height="100px" Width="100%" ...>
    <Paddings Padding="0px" />
    <!-- ... -->
</dx:ASPxPageControl>

Create an function (AdjustSize) that resizes the page control within the entire browser window. Call this function in the following cases:

• The control is first initialized - handle the control's client-side Init event.
• The browser window size changes - call the client-side AttachEventToElement method to handle the browser's resize event.

<dx:ASPxPageControl ID="pc" runat="server" ... >
    <!--...-->
    <ClientSideEvents Init="OnInit" />
</dx:ASPxPageControl>

function OnInit(s, e) {
    AdjustSize();
    ASPxClientUtils.AttachEventToElement(window, "resize", function(evt) {AdjustSize();});
}

function AdjustSize() {
    var height = document.documentElement.clientHeight;
    pc.SetHeight(height);
}

Files to Review

• Default.aspx (VB: Default.aspx)

Documentation

• Page Control

More Examples

• Grid View for ASP.NET Web Forms - How to display the Grid View in the full screen mode (100% width and height)
• Splitter - Full Screen Mode