Making RadPanelBar occupy 100% of browser window's height

RELATED TO:


Article information

Article relates to

RadPanelBar v3.x "classic"
RadPanelBar for ASP.NET AJAX
(Telerik.Web.UI 2008.1.x)

Created by

Paul, Telerik

Last modified by

Veskoni, Telerik

HOW-TO
Make RadPanelBar occupy 100% of browser window's height.



SOLUTION
By design, in its Height property RadPanelBar accepts a pixel value only. This makes it hard to extend the panelbar to occupy 100% of the height of the browser. Here are the steps to accomplish that:

1. Set an unusually large number in the Height property of your RadPanelBar - i.e. Height="3000px";
2. Add this script in your aspx page:

<script type="text/javascript"> 
function pageLoad() 
{ 
    resizePanelBar(); 
} 
 
function resizePanelBar() 
 { 
  var thePanelbar = document.getElementById("RadPanelBar1"); 
  var intCompensate = 0; 
  var documentObj = document.documentElement; 
  if (window.opera || (document.all && !(document.compatMode && document.compatMode == "CSS1Compat"))) 
  { 
   documentObj = document.body; 
  } 
  thePanelbar.style.height = (parseInt(documentObj.clientHeight) - intCompensate) + "px"; 
  if (!document.readyState) 
  { 
   document.readyState = "complete"; 
  } 
} 
 
window.onresize = resizePanelBar; 
</script> 

3. Add the following style in the body tag:

<body style="margin:0px"> 

This will guarantee that even after you resize the browser the panelbar will occupy the full visible height of the window.

SOLUTION (v.3.x)
By design, in its Height property RadPanelBar accepts a pixel value only . This makes it hard to extend the panelbar to occupy 100% of the height of the browser, especially if you have set the FullExpandedPanels and SingleExpandedPanel properties to true.
However it is possible to make the panelbar occupy the 100% of the visible height of the browser window. Here are the steps to accomplish that:

  1. Set an unusually large number in the Height property of your RadPanelBar - i.e. Height="3000px";
  2. Set SingleExpandedPanel="True" and FullExpandedPanels="True";
  3. Create the following JavaScript function:
    4. <script type="text/javascript"> 
    function OnPanelResize() 
     { 
      var thePanelbar = document.getElementById("RadPanelBar1"); 
      var intCompensate = 0; 
      var documentObj = document.documentElement; 
      if (window.opera || (document.all && !(document.compatMode && document.compatMode == "CSS1Compat"))) 
      { 
       documentObj = document.body; 
      } 
      thePanelbar.style.height = (parseInt(documentObj.clientHeight) - intCompensate) + "px"; 
      if (!document.readyState) 
      { 
       document.readyState = "complete"; 
      } 
      RadPanelBar1.Height = parseInt(documentObj.clientHeight) - intCompensate; 
      RadPanelBar1.InitFullExpandOpera(); 
     } 
     window.onload = OnPanelResize; 
     window.onresize = OnPanelResize; 
    </script> 

  4. Here RadPanelBar1 is the ID of your panelbar. Replace it as needed. It is up to you to choose the value of the intCompensate variable. In an empty webform with just the panelbar on it, 0 pixels make the top and bottom margins between the Panelbar and the window borders quite similar.
     
  5. Add the following attributes to the <body> tag of the webform:

    <body style="margin:0px"> 

This will guarantee that even after you resize the browser the panelbar will occupy the full visible height of the window.

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.