setting an initial width of radsplitter/radpane with width=100%

5 posts, 0 answers
  1. Felipe
    Felipe avatar
    33 posts
    Member since:
    Dec 2010

    Posted 22 Apr 2011 Link to this post


    I am using a radsplitter/radpane in my application (inside a Master page if that changes things) with width/height set to 100% (filling the browser).

    When loading the page in chrome, everything loads pretty quickly and visually the page looks fine.

    when loading the page in IE, however, there is a brief lag period in the initial loading of the page where the radsplitter is initially quite small (on the order of 500px or so) while the content is loading.

    i am assuming that IE renders its content differently somehow in such a way that it cannot calculate the full height of the browser until after the full page load... (that, or the javascript function to recalculate the height of the control is just fired much later in IE?)

    what i am asking is:  is there a way to set an "initial width" to the radsplitter so that when it loads it looks more reasonable (say 1000px or something) and then adjusts itself to 100% when it is ready?

  2. Dobromir
    Dobromir avatar
    1633 posts

    Posted 26 Apr 2011 Link to this post

    Hi Leland,

    It is not possible to set a predefined width / height to the splitter when configured to use percentage values. Could you please try setting RadSplitter's VisibleDuringInit property to false and see if the reported behavior will occur under Internet Explorer?

    Best wishes,
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Felipe
    Felipe avatar
    33 posts
    Member since:
    Dec 2010

    Posted 27 Apr 2011 Link to this post

    This is what i initially did but it would take IE a fair amount of time to "init" and made the site seem a bit slower...

    i removed some javascript to an external file though and now it is much quicker - good enough for me.

    thanks for the help.
  4. Lohith
    Lohith avatar
    7 posts
    Member since:
    Oct 2012

    Posted 16 Dec 2012 Link to this post


    Please be informed we have initiated the procurement of new version of telerik and we are using trial version to start off with migration and hence we would really appreciate if you could help though the 30 day trail period is over.

    We are migrating to new telerik controls and we too face the same issue.  When we hit F5 the pane initially takes width and height much smaller than the screen and then expands.

    We also see a difference in the code produced by the same telerik control after upgrade it seems to output width and height inline without we explicitly setting it which might be the probable cause for the issue.

    New version of Telerik spitting out this html snippet( 2012.3.1016.40 ).

    <div id="RAD_SPLITTER_PANE_CONTENT_ctl00_RadPaneContent"  style="width:192px;height:398px;overflow:auto;background-color:#F3F3F3;">
                <div id="ctl00_ctl00_PanelContentPanel">

    Older version of Telerik spitting out the below html.

    <div id="RAD_SPLITTER_PANE_CONTENT_RadPaneContent"  style="overflow:auto;background-color:#F3F3F3;">
                <div id="ctl00$PanelContentPanel">

    Below it the tags for rad splitter.

        <telerik:RadSplitter ID="RadSplitterHeaderTreeContent" runat="server" HeightOffset="<%# SplitterOffsetHeight %>"
            Height="100%" Width="100%" BackColor="#E6E6E6" VisibleDuringInit="false" OnClientLoaded="OnSplitterLoaded"  OnClientResized="OnSplitterResized">
            <telerik:RadPane ID="RadPaneTree" runat="server" PersistScrollPosition="true" BackColor="#E6E6E6"
                Height="100%" OnClientResized="SetTreeWidthCookie" OnClientCollapsed="SetTreeCollapsedCookie"
                <div class="mymenu">
                    <ucTreeView:CentraLineTreeView ID="tree" runat="server" />
            <telerik:RadSplitBar ID="RadsplitbarTreeContent" runat="server" CollapseMode="Forward" />
            <telerik:RadPane ID="RadPaneContent" runat="server" BackColor="#F3F3F3" PersistScrollPosition="false">
                <asp:Panel ID="PanelContent" runat="server">
                    <asp:ContentPlaceHolder ID="ct" runat="server" />
    How can I get rid of this behavior, Also be informed that we do not set the width or height programmatically either at client or the server. I have also tried your suggestion with no go.
    Looking forward for your support.  Thanks in advance.



  5. Vessy
    Vessy avatar
    1886 posts

    Posted 17 Dec 2012 Link to this post

    Hi Leland,

    The experienced behavior is caused by a known bug in the 2012.3.1016 version of the Splitter, connected with the functionality of the VisibleDuringInit property (refer this PITS item). The issue has already been resolved and it is functioning properly in our latest Service Pack (2012.3.1205), so my suggestion is to upgrade to it.

    For the time being you can use the following workaround:
    .rspHideRadSplitter {
        POSITION: absolute; TOP: -99999px

    I hope this information is helpful for you.

    the Telerik team
    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 their blog feed now.
Back to Top