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.
CSSbody, 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.
ASPx<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
Initevent. - The browser window size changes - call the client-side AttachEventToElement method to handle the browser's
resizeevent.
ASPx<dx:ASPxPageControl ID="pc" runat="server" ... >
<!--...-->
<ClientSideEvents Init="OnInit" />
</dx:ASPxPageControl>
JavaScriptfunction 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
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
Example Code
WebSite/Default.aspx
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body, html
{
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript">
function OnInit(s, e) {
AdjustSize();
ASPxClientUtils.AttachEventToElement(window, "resize", function(evt) {
AdjustSize();
});
}
function AdjustSize() {
var height = document.documentElement.clientHeight;
pc.SetHeight(height);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<dx:ASPxPageControl ID="pc" runat="server" ActiveTabIndex="0" Height="100px" ClientInstanceName="pc"
Width="100%">
<ContentStyle BackColor="LightGray">
</ContentStyle>
<Paddings Padding="0px" />
<TabPages>
<dx:TabPage Text="First">
<ContentCollection>
<dx:ContentControl runat="server">
</dx:ContentControl>
</ContentCollection>
</dx:TabPage>
<dx:TabPage Text="Second">
<ContentCollection>
<dx:ContentControl runat="server">
</dx:ContentControl>
</ContentCollection>
</dx:TabPage>
<dx:TabPage Text="Third">
<ContentCollection>
<dx:ContentControl runat="server">
</dx:ContentControl>
</ContentCollection>
</dx:TabPage>
</TabPages>
<ClientSideEvents Init="OnInit" />
</dx:ASPxPageControl>
</form>
</body>
</html>