RadSplitter RadPane height autoset to 398px if contenturl property is set

6 posts, 0 answers
  1. Expense Anywhere
    Expense  Anywhere avatar
    2 posts
    Member since:
    Sep 2009

    Posted 22 Jul 2010 Link to this post

         I have an urgent issue to resolve regarding height property of the RadPane inside the RadSplitter. Eventhough I set an explicit height property value for the RadPane, by default it picks up a height of 398px and introduces a vertical scroll in the page which is not desired in our application. I have attached the screen shot of the sample page we created (same as in the Telerik demo site for RadSplitter) and the firebug screen shot showing the the height attribute of the Iframe generated as 398px. Please suggest a method to override this default behavior of the RadPane to set height based on the contenturl page content.

    Note: I have included the height property for the RadPane in the code below and I have Highlighted the height in the FireBug window screen shot


    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><br><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><br><html xmlns="http://www.w3.org/1999/xhtml" ><br><head runat="server"><br>    <title>Untitled Page</title><br></head><br><body><br><br>    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"><br>    </telerik:RadScriptManager><br>    <div class="bigModule" style="margin-bottom: 40px"><br>        <div class="bigModuleBottom"><br>            <a href="http://yahoo.com" target="<%= contentPane.ClientID%>">Open yahoo.com</a><br>            in the right pane.<br /><br>        </div><br>    </div><br>    <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="400" Width="700"><br>        <telerik:RadPane ID="RadPane1" runat="server" Width="150" Height="700px"><br>            Left Pane<br /><br>            <a href="http://google.com" target="<%= contentPane.ClientID%>">Open google.com</a><br /><br>            <br /><br>            <a href="http://flickr.com" target="<%= contentPane.ClientID%>">Open flickr.com</a><br>        </telerik:RadPane><br>        <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward"></telerik:RadSplitBar><br>        <telerik:RadPane ID="contentPane" runat="server" ContentUrl="http://blogs.telerik.com"><br>        </telerik:RadPane><br>    </telerik:RadSplitter><br>    <br /><br>    <div class="bigModule" style="margin-bottom: 40px"><br>        <div class="bigModuleBottom"><br>            External Content with disabled scrolling.</div><br>    </div><br>    <telerik:RadSplitter ID="Radsplitter2" runat="server" Height="400" Width="700"><br>        <telerik:RadPane ID="Radpane3" runat="server" Width="150" Height="100"><br>            Left Pane<br /><br>            <a href="http://google.com" target="<%= contentPane2.ClientID%>">Open google.com</a><br /><br>            <br /><br>            <a href="http://flickr.com" target="<%= contentPane2.ClientID%>">Open flickr.com</a><br>        </telerik:RadPane><br>        <telerik:RadSplitBar ID="Radsplitbar2" runat="server" CollapseMode="Forward"></telerik:RadSplitBar><br>        <telerik:RadPane ID="contentPane2" runat="server" ContentUrl="http://blogs.telerik.com"<br>            Scrolling="none"><br>        </telerik:RadPane><br>    </telerik:RadSplitter><br>    <br></body><br></html>
  2. Dobromir
    Dobromir avatar
    1633 posts

    Posted 28 Jul 2010 Link to this post

    Hi Vasanth,

    By design, RadSplitter preserves its Width or Height regardless the preset size of its panes depending on its orientation - when splitter is vertical (Orientation="Vertical" default value) the width is preserved, when splitter is horizontal (Orientation="Horizontal)" the width is preserved.

    An explanation and a possible solution on how to resize the RadPane according to its content is available in the following forum post:

    Sincerely yours,
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Expense Anywhere
    Expense  Anywhere avatar
    2 posts
    Member since:
    Sep 2009

    Posted 28 Jul 2010 Link to this post

         Thanks a lot for the help. Getting reference to the splitter from the inner page resolves the issue.
  4. Dan
    Dan avatar
    1 posts
    Member since:
    Feb 2016

    Posted 28 Jul 2017 Link to this post


    this is the most suitable thread I found for my question.
    We have a similar issue.
    We have a master page with a RadSplitter and in the RadSplitter we have two RadPanes (TopPane, MainPane). The main pane has again two panes (ToolbarPane and ContentPane) and inside all panes we have ContentPlaceHolder.

    The content itself has JS resize functions which worked till we updated the ui libs (40.2017.2.503).
    Since the update, the panes stay at width 398px and do not resize to the content.
    We tried this: http://www.telerik.com/support/kb/aspnet-ajax/details/initially-resize-the-radsplitter-according-to-its-content
    but it did not help.

    Has someone an idea?

  5. Vessy
    Vessy avatar
    2133 posts

    Posted 01 Aug 2017 Link to this post

    Hi DAn,

    I have just answered your support ticket on the same matter and will ask you to continue the problem investigation there. Please, feel free to update this thread with the final results of our discussion, once we resolve the problem.

    Kind regards,
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
    EZECHIAS avatar
    8 posts
    Member since:
    May 2013

    Posted 27 May 2018 Link to this post

    Please use this css rule to overrule the default height: 398px:

    .rspPane > div
        height: 42em!important;

Back to Top