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

How is Height of RadPane auto resized ?

5 Answers 378 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Truong Giang Thai
Top achievements
Rank 1
Truong Giang Thai asked on 03 Nov 2009, 07:52 AM
I have a RadGird in a RadPane, i want height of RadPane is auto resized follow content of RadGird. If i set height of RadPane, it's not auto resize . I don't know how to do. Any one help me? 

5 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
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.
0
Truong Giang Thai
Top achievements
Rank 1
answered on 07 Nov 2009, 03:25 PM
Thanks for your helping, i really resolved it.
0
Dylan
Top achievements
Rank 2
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">

 

 

 

<ContentTemplate>

 

 

 

<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">

 

 

 

<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 30px;">

 

 

 

<tr bgcolor="black">

 

 

 

<td class="tdmain_top" align="right" width="100">

 

 

 

<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>

 

 

 

<td class="tdmain_top" valign="bottom" align="right">

 

 

 

<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>

 

0
Vessy
Telerik team
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.
0
Ravindranath reddy
Top achievements
Rank 1
answered on 15 Aug 2014, 12:24 AM
Thanks man, it works perfect!
Tags
Splitter
Asked by
Truong Giang Thai
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Truong Giang Thai
Top achievements
Rank 1
Dylan
Top achievements
Rank 2
Vessy
Telerik team
Ravindranath reddy
Top achievements
Rank 1
Share this question
or