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

Unable to set size by percent in IE for RadSplitter inside of RadTabStrip

1 Answer 60 Views
TabStrip
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, 05:26 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, 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"
                           <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.

1 Answer, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 09 Oct 2009, 11:29 AM
Hi LESLIE,

Please find below your modified code snippet that shows the needed approach.

<head runat="server">
    <title></title>
    <style type="text/css">
        html, body, form
        {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body onresize="pageLoad()">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
 
    <script type="text/javascript">
        function pageLoad() {
            var ts = $find('<%= radTapStripMain.ClientID %>');
            var mp = $find('<%= radMultiPageMain.ClientID %>');
            var myDiv = $get('<%= div1.ClientID %>');
 
            mp.get_element().style.height = (myDiv.offsetHeight - ts.get_element().offsetHeight) + "px";
        }
    </script>
 
    <div id="div1" runat="server" style="width: 100%; height: 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%" 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>
</html>


All the best,
Paul
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
TabStrip
Asked by
Joseph Alfano
Top achievements
Rank 1
Answers by
Paul
Telerik team
Share this question
or