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, instead of percent, it works fine.
The markup for the page, specifying the width and height by percent is listed below:
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:
The javascript error that gets thrown in IE occurs in the line marked with asteriks in the following javascript function:
The error states that 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.
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, instead of percent, it works fine.
The markup for the page, specifying the width and height by percent is listed below:
<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"> |
<a 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 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 that 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.