This is a migrated thread and some comments may be shown as answers.

How is Height of RadPane auto resized ?

5 Answers 560 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

5 Answers, 1 is accepted

answered on 04 Nov 2009, 01:06 PM

Hi Truong,

The RadSplitter does not have such built-in functionality. The main problem is that a lot of the features of the splitter and panes require that the RadPanes have size in pixels. For example, features that require this are MinWidth, MaxWidth, MinHeight, MaxHeight, Scrolling, etc. In case you simply need to display two cells in a row and do not intend to use any of the functionality that the RadSplitter offers, you can simply replace the splitter with a TABLE element. That way, you will reduce the client objects that are creates on your page with three (one for the RadSplitter and two for the two RadPanes).

However, in case you prefer to use the RadSplitter control even in case you do not intend to use the functionality it offers, you can use the following approach:

<head runat="server">

<title></title>

<style type="text/css">

.AutoHeight

{

height: auto !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<telerik:RadSplitter ID="RadSplitter1" runat="server" CssClass="AutoHeight">

<telerik:RadPane ID="RadPane1" runat="server" CssClass="AutoHeight" BackColor="Aqua"

Scrolling="None">

TreeView pane

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" />

<telerik:RadPane ID="RadPane2" runat="server" CssClass="AutoHeight" BackColor="Red"

Scrolling="None">

Grid pane

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 14 Jun 2013, 02:03 AM

Hi,

I try to set the main pane height to be auto so when user using different IE they can see the whole page. It look ok on IE7 if i set to 600px, but when i open the page in IE8, the page will overlap and part of the menu will be hidden from view.

form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">

</telerik:RadScriptManager>

<telerik:RadSkinManager ID="RadSkinManager1" Runat="server">

</telerik:RadSkinManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"

Skin="Default">

</telerik:RadAjaxLoadingPanel>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<telerik:RadSplitter ID="RadSplitter1" Runat="server" Height="100%"

Orientation="Horizontal" style="margin-top: 0px" VisibleDuringInit="False"

Width="100%">

<telerik:RadPane ID="TopPane" Runat="server" Height="30px" Scrolling="None">

<asp:Label ID="lblDate" Runat="server" CssClass="labeldate" Font-Bold="True"

Font-Names="Arial" Font-Size="12px" ForeColor="Black" Height="16px"

Width="245px"></asp:Label>

</td>

<asp:Label ID="lblTitle" Runat="server" CssClass="pms" Font-Bold="True"

Height="16px" Width="500px">PROJECT MANAGEMENT SYSTEM

</asp:Label>

</td><td

align="right" class="tdmain_top_right" valign="bottom">

<asp:HyperLink ID="lblUser" runat="server" Font-Bold="True" Font-Names="Arial"

Font-Size="9pt" Font-Underline="False" ForeColor="Black"

NavigateUrl="~/UserInfo.aspx" Width="80px">[lblUser]</asp:HyperLink></td><td

align="right" class="tdmain_top_right" valign="bottom">

<asp:HyperLink ID="LogHyper" runat="server" Font-Bold="True" Font-Names="Arial"

Font-Size="9pt" Font-Underline="False" ForeColor="Black"

NavigateUrl="~/Login.aspx?Command=SignOut" Target="_parent" Width="80px">LOGOUT</asp:HyperLink></td></tr></table></telerik:RadPane>

<telerik:RadPane ID="MainPane" Runat="server" Height="600px">

<telerik:RadSplitter

ID="RadSplitter2" Runat="server" Height="100%"

VisibleDuringInit="False" Width="100%">

<telerik:RadPane ID="MenuPane" Runat="server"

Width="245px">

<telerik:RadPanelBar ID="RadPanelBar1" Runat="server"

AllowCollapseAllItems="True" ExpandMode="FullExpandedItem" Height="100%"

OnClientItemClicking="OnClientItemClicking" Width="100%">

</telerik:RadPanelBar>

</telerik:RadPane><telerik:RadSplitBar ID="RadSplitBar1" Runat="server">

</telerik:RadSplitBar>

<telerik:RadPane ID="Main" Runat="server" ShowContentDuringLoad="False">

<asp:Panel ID="Panel1" runat="server">

</asp:Panel>

</telerik:RadPane></telerik:RadSplitter></telerik:RadPane>

</telerik:RadSplitter>

</ContentTemplate>

</asp:UpdatePanel>

</form>

answered on 18 Jun 2013, 02:22 PM

Hi Dylan,

I am no quite sure whether I understand the specific scenario correctly and what exactly do you mean with "I try to set the main pane height to be auto":

If you want the main pane to be resized depending on its content, you can see how that can be done in this help article: Initially Resize the RadSplitter according to its content
If you want to make the Splitter occupy 100% of the current viewport, you will need to configure also the size of all its parents, up to a parent with a fixed size. In your scenario you have to:
- remove the height property of the MainPane
- set the height of UpdatePanel1:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" style="height:100%;">

- add the following CSS styles to the html, body, form elements, which are also parents for the Splitter:

html, body, form

{

    height: 100%;

    padding: 0;

    margin: 0;

    overflow: hidden;

}

Hope this helps.

Regards,
Veselina Raykova
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

How is Height of RadPane auto resized ?

5 Answers, 1 is accepted