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

Unable to set size by percent for RadSplitter inside of RadTabStrip

1 Answer 132 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Joseph Alfano
Top achievements
Rank 1
Joseph Alfano asked on 08 Oct 2009, 03:25 PM

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">  
                <Tabs> 
                    <telerik:RadTab Value="tabAdmin" Text="Admin" PageViewID="pvAdmin" Visible="true" runat="server" /> 
                </Tabs> 
            </telerik:RadTabStrip> 
 
            <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:radpane> 
                      <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:radsplitter>       
                 </telerik:RadPageView >    
            </telerik:RadMultiPage> 
              
        </div> 
    </form> 
</body> 

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:


Firefox:  
<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;">  
 
IE6:  
<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:

 function(g,f)  
 {  
    if(f<=0||f==""){  
        g.style.width="" 
    }     
    else 
    {  
***     g.style.width=f+"px";  
        var h=g.offsetWidth-f;  
        var e=f-h;  
        if(e>0)  
        {  
            g.style.width=e+"px" 
        }  
        else 
        {  
            g.style.width="" 
        }  
    }  
  } 

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.

1 Answer, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 13 Oct 2009, 02:48 PM
Hi LESLIE PELTASON,

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,
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.
Tags
Splitter
Asked by
Joseph Alfano
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Share this question
or