|
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:
- Set an unusually large number in the Height property of your RadPanelBar - i.e. Height="3000px";
- Set SingleExpandedPanel="True" and FullExpandedPanels="True";
- Create the following JavaScript function:
| <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> |
- 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.
- 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.
Please
Sign In
to rate this article.