Unable to set size by percent in IE 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, 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.

  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 09 Oct 2009 Link to this post

    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.
Back to Top