Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Splitter > RadSplitter Height resize..
RadControls for ASP.NET are no longer supported (see this page for reference). In case you have inquiries about the Telerik ASP.NET AJAX controls, post them in the pertinent ASP.NET AJAX forums.

Not answered RadSplitter Height resize..

Feed from this thread
  • Craig Ennis avatar

    Posted on May 11, 2011 (permalink)

    Hi,

    I have this splitter:
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" ResizeWithParentPane="false" HeightOffset="150">
           <telerik:RadPane ID="LeftPane" runat="server" Width="1px" Scrolling="None">
               <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="20px" DockedPaneId="pnlNavigation" ClickToOpen="true">
                   <telerik:RadSlidingPane ID="pnlNavigation" Title="Navigation" UndockText="" runat="server" Width="195px" DockOnOpen="true" Scrolling="None">
           <div class="mainnav2">
           <telerik:RadPanelBar ID="MainNavigation" Width="100%" runat="server" Skin="Black"
               Expanded="true">
           </telerik:RadPanelBar>
           </div>
                   </telerik:RadSlidingPane>
               </telerik:RadSlidingZone>
           </telerik:RadPane>
           <telerik:RadSplitBar ID="Radsplitbar1" runat="server" EnableResize="false" Visible="false">
           </telerik:RadSplitBar>
           <telerik:RadPane ID="RightPane" runat="server" Scrolling="None">
       <div class="content2">
       <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
       </asp:ContentPlaceHolder>
       </div>
           </telerik:RadPane>
       </telerik:RadSplitter>

    My page has a header, middle section, and footer.

    The middle section is split into two parts: the left navigation and the content one.

    The splitter works fine as is, sliding nice and resizing the width of the content section well.
    The only problem I have is that is not resizing the height of it.
    When the content of the RightPane is larger in height is hidden.
    If I change the Scrolling to something else I can scroll and see the contents but I want to have the scrollbars in the browser.

    I tried everything i could find on these forums or elsewhere.

    Any help will be appreciated.
    Steve,


  • Dobromir Dobromir admin's avatar

    Posted on May 12, 2011 (permalink)

    Hi Craig,

    The most possible reason for the reported problem is if the height is not set to 100% to all RadSplitter's parent elements. Please refer to this example for information.

    If this is not the case, could you please provide the entire page declaration so we can investigate the issue?

    All the best,
    Dobromir
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  • Craig Ennis avatar

    Posted on May 12, 2011 (permalink)

    I tried it with no luck..

    This is the master page I'm using:
    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
     
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <link href="~/CSS/Style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <ajax:ToolkitScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"
            EnablePageMethods="true" ScriptMode="Release" />
        <div class="container">
            <div class="logo">
            </div>
            <div class="title">
                <asp:Label ID="lblPageTitle" runat="server"></asp:Label>
            </div>
            <div class="powerdby">
            </div>
            <div class="topnav">
                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
                <asp:LoginStatus ID="LoginStatus1" CssClass="HyperLink1" runat="server" LogoutPageUrl="~/Default.aspx" />
            </div>
            <div id="divMessagePanels" runat="server" visible="false">
            </div>
            <div class="contentcontainer">
                <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%"
                    Height="100%" ResizeWithParentPane="false" HeightOffset="150" BorderSize="0">
                    <telerik:RadPane ID="LeftPane" runat="server" Width="1px" Scrolling="None">
                        <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="20px" DockedPaneId="pnlNavigation" ClickToOpen="true">
                            <telerik:RadSlidingPane ID="pnlNavigation" Title="Navigation" TabView="ImageOnly" IconUrl="~/Images/icon.png"
                                            Width="195px" DockOnOpen="true" Scrolling="None" BackColor="Transparent" runat="server" >
                                                                               <div class="mainnav2">
                                                                                    <telerik:RadPanelBar ID="MainNavigation" Width="100%" runat="server" Skin="Black"
                                                                                        Expanded="true">
                                                                                    </telerik:RadPanelBar>
                                                                                </div>
                            </telerik:RadSlidingPane>
                        </telerik:RadSlidingZone>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="Radsplitbar1" runat="server" EnableResize="false" Visible="false">
                    </telerik:RadSplitBar>
                    <telerik:RadPane ID="RightPane" runat="server" Scrolling="None">
                                                                                 
                                                                                <div class="content2">
                                                                                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                                                                                    </asp:ContentPlaceHolder>
                                                                                </div>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </div>
            <div class="footer">
                <table width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td valign="top" width="100%">
                            <asp:LoginView ID="LoginView1" runat="server">
                                <LoggedInTemplate>
                                    <asp:LoginName ID="lblLoginName" runat="server" FormatString="Logged in as {0}" />
                                </LoggedInTemplate>
                            </asp:LoginView>
                             | 
                            <asp:LoginStatus ID="LoginStatus2" CssClass="HyperLink1" runat="server" LogoutPageUrl="~/Default.aspx" />
                             | 
                            <asp:HyperLink ID="linkChangePassword" NavigateUrl="ChangePassword.aspx"
                                runat="server">Change Password</asp:HyperLink>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        </form>
    </body>
    </html>

    This is part of the css that is used on the master page:

    body
    {
        background-image: url('../Images/bg.jpg');
        background-repeat: repeat-x;
        background-color: #000;
        margin: 0px 0px 0px 0px;
        font-family: Arial,Helvetica,sans-serif;
    }
     
    html, body
    {
        margin: 0px;
        height: 100%;
    }
     
    .container
    {
        margin-left: auto;
        margin-right: auto;
        width: 1020px;
        height: 100%;
    }
     
    .contentcontainer
    {
        background-image: url('../Images/contentcontainer_bg.jpg');
        background-repeat: repeat-y;
        background-position: 20px 0px;
        width: 1020px;
        float: left;
        margin-top: -18px;
        height: 100%;
    }
     
    .logo
    {
        background-image: url('../Images/logo.png');
        width: 230px;
        height: 100px;
        float: left;
    }
     
    .title
    {
        font-size: 13px;
        font-weight: bold;
        color: #FFF;
        padding-top: 13px;
        width: 250px;
        height: 35px;
        float: left;
    }
     
    .topnav
    {
        font-size: 13px;
        font-weight: bold;
        color: #FFF;
        text-align: right;
        padding-top: 13px;
        width: 410px;
        height: 35px;
        float: right;
    }
     
    .topnav a
    {
        color: #FFF;
        background-image: url('../Images/top_nav_divider.png');
        background-repeat: no-repeat;
        background-position: left;
        padding-left: 28px;
        padding-right: 14px;
        text-decoration: none;
    }
     
    .powerdby
    {
        background-image: url('../Images/poweredby.png');
        background-repeat: no-repeat;
        width: 130px;
        height: 35px;
        float: right;
    }
     
     
    .mainnav2
    {
        height: 100%;
    }
     
    .mainnav2 a
    {
        color: #FFF !important;
    }
     
    .content2
    {
        background-color: #FFF;
        width: 100%;
        height: 100%;
    }
     
    .footer
    {
        font-size: 13px;
        font-weight: bold;
        color: #FFF;
        width: 1020px;
        height: 50px;
        text-align: right;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        float: left;
    }

    Thanks,
    Steve

  • Craig Ennis avatar

    Posted on May 13, 2011 (permalink)

    Any updates from the Telerik team?

  • Craig Ennis avatar

    Posted on May 19, 2011 (permalink)

    Still no updates?

  • Dobromir Dobromir admin's avatar

    Posted on May 20, 2011 (permalink)

    Hi Craig,

    In the provided MasterPage markup and CSS is missing height declaration for the <form> element, which is also a parent of the RadSplitter.

    However, after rereading the initial post I believe that I misunderstand it the first time. If you want the splitter to be as high as its content you need to manually resize it. Please take a look at the following KB article for example of how to achieve this:
    Initially Resize the RadSplitter according to its content

    All the best,
    Dobromir
    the Telerik team

    Consider using RadControls for ASP.NET AJAX (built on top of the ASP.NET AJAX framework) as a replacement for the Telerik ASP.NET Classic controls, See the product support lifecycle here.

  • Craig Ennis avatar

    Posted on May 20, 2011 (permalink)

    Thanks for the reply.

    I tried that too.

    Content has a variable height which is expanding/collapsing by showing/hiding panels so the container's height may vary.
    Your solution will work with a static height.

    I may have to look for another control.

    Thanks

  • Dobromir Dobromir admin's avatar

    Posted on May 24, 2011 (permalink)

    Hi Craig,

    You can resize the splitter to match the size of the content when it is changed by executing the ResizeSplitter from the KB article from my previous reply, for example if you are using RadPanelBar you need to execute ResizeSplitter() in the RadPanelBar's ClientItemExpand client-side event.

    Also, you can find an example of how to reference the master page from the content page and vice versa in this KB article.

    Kind regards,
    Dobromir
    the Telerik team

    Consider using RadControls for ASP.NET AJAX (built on top of the ASP.NET AJAX framework) as a replacement for the Telerik ASP.NET Classic controls, See the product support lifecycle here.

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Splitter > RadSplitter Height resize..