Unable to set size by percent for RadSplitter inside of RadTabStrip

2 posts, 0 answers
  1. Joseph Alfano
    Joseph Alfano avatar
    14 posts
    Member since:
    Sep 2009

    Posted 08 Oct 2009 Link to this post

    Hi Support Team,

    I am using RadControls for ASP.Net AJAX (v. 2009.2.826.35).  I have a RadSplitter control that is nested inside of a RadMultiPage control used by a RadTabStrip.  The splitter controls has two panes - a left pane, that has a fixed width in pixels, and a right pane that I want to fill all of the remaining area.  I have tried to set the height and width of the right pane in two ways: 1) by setting both the height and width to 100%, and 2) using the "Free Size" method, where the height and width are not specified in the RadPane and the splitter calculates the pane size based on what space is remaining after allocating space to absolutely-sized or percent-sized panes.

    Either method works fine in Firefox (v3.0.14) and Chrome (v3.0.195.25).  However, in both IE6 and IE8, I get a javascript error, and the content in the right pane only occupies a small fraction of the total available space.  If I specify the height and width in pixels in IE, it works fine.

    The markup for the first method (specifying by percent) is listed below. (The right panehas an ID="RightPane")

    <body style="height:100%;margin:0px;width:100%;" > 
        <form id="Form1" runat="server" style="height:100%;margin:0px" > 
            <asp:ScriptManager ID="ScriptManager1" runat="server"/>  
            <div style="height:100%;margin:0px;width:100%;" > 
                <telerik:RadTabStrip ID="radTapStripMain" MultiPageID="radMultiPageMain" AutoPostBack="false" Width="100%" runat="server">  
                        <telerik:RadTab Value="tabAdmin" Text="Admin" PageViewID="pvAdmin" Visible="true" runat="server" /> 
                <telerik:RadMultiPage id="radMultiPageMain" runat="server" Height="100%" Width="100%">  
                   <telerik:RadPageView  id="pvAdmin" runat="server" Visible="true" Height="100%" Width="100%">  
                        <telerik:radsplitter id="splitterLinksIndex" orientation="Vertical" Width="100%" Height="100%" HeightOffset="30" runat="server" > 
                          <telerik:radpane id="LeftPane" Width="200" MinWidth="100" MaxWidth="500" runat="server">  
                               <href="http://www.telerik.com" target="<%= RightPane.ClientID %>">link</a> 
                          <telerik:radsplitbar id="RadSplitBar1" collapsemode="Forward" runat="server"/>  
                          <telerik:radpane Scrolling="Y" id="RightPane" Width="100%" Height="100%" ContentUrl="http://www.microsoft.com" runat="server"></telerik:radpane> 
                     </telerik:RadPageView >    

    If I look at the IFRAME that is generated by the page, it has a specified height and width in Firefox but not in IE:

    <iframe id="RAD_SPLITTER_PANE_EXT_CONTENT_RightPane" frameborder="0" scrolling="auto" name="RightPane" src="http://www.microsoft.com" style="border: 0px none ; height: 825px; width: 1055px;">  
    <IFRAME id=RAD_SPLITTER_PANE_EXT_CONTENT_RightPane style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px" name=RightPane src="http://www.microsoft.com" frameBorder=0></IFRAME> 

    The javascript error that gets thrown in IE occurs in the line marked with asteriks in the following Telerik javascript function:

    ***     g.style.width=f+"px";  
            var h=g.offsetWidth-f;  
            var e=f-h;  

    The error states the the variable "f" is NaN.  I get the same error if I specify the height and width by percent or by the "free size" method.

    As an aside, if I remove the splitter from the RadMultiPage and RadTabStrip and put it by itself on the page, the IE javascript error disappears and I can set the width and height by percent with no problems.

    Thank you for your assistance.  Please let me know if you need any further information.

  2. Svetlina Anati
    Svetlina Anati avatar
    2795 posts

    Posted 13 Oct 2009 Link to this post


    You are correct that there was a problem in such configuration with the RadSplitter control. However, the problem is already fixed and it will be solved once you upgrade to a later version of RadControls. This being said, I suggest to wait until our Beta release is available which is scheduled for this Thursday or in case you cannot wait till then, you can use the latest internal build for the time being. I tested your code with the latest source code and everything worked as expected.

    All the best,
    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.
  3. DevCraft R3 2016 release webinar banner
Back to Top