RadSplitter Height Not correct in Firefox

2 posts, 0 answers
  1. Pete
    Pete avatar
    14 posts
    Member since:
    Jun 2010

    Posted 25 Aug 2011 Link to this post

    Hello,
    I'm having a problem with a RadSplitter displaying properly in firefox ( I'm testing in version 3.6).  In IE it displays to the full height of 100%. In Firefox it displays to about 50% of the page.  Funny thing is if I set the RadSplitter to a fixed height of say 700px instead of 85% it looks fine.  We prefer  not to set the height to a fixed value and use percentages instead.
    Code below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <style type="text/css">
            .StdFont {FONT-SIZE: 11px; FONT-FAMILY: Arial; vertical-align: top;}        
            .BoldFont {FONT-WEIGHT: bold; FONT-SIZE: 11px; FONT-FAMILY: Arial; vertical-align: top; padding-right:5px}
            .TableBase { width: 100%;}
            .Textfont{FONT-FAMILY:Arial;FONT-SIZE:11px;}
            .ReqFont{FONT-SIZE: 0.9em; FONT-FAMILY: Arial; FONT-WEIGHT:Bold;}
            .AjaxLoadingPanelBackground { height: 100%; background:#fff; } 
            .AjaxLoadingPanel { margin-top: 25px; } 
    </style>
    <html xmlns="http://www.w3.org/1999/xhtml" style="height:100%; margin=0px;">
    <head runat="server">
        <title>My Maintenance</title>
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
    </head>
    <body style="margin:0px;height:100%;overflow:hidden; cursor:default;"  >
        <form id="form1" runat="server">
     <script language="javascript" type="text/javascript">
          
        function checkallList(source)
        {      
            var lbl = source.nextSibling;
            var chkBoxlist = <%=lblBranchSelection.ClientID %>;
            var chkBoxCount = chkBoxlist.getElementsByTagName("input");
            var i;
            for(i = 0; i < chkBoxCount.length; i++)
            {
                if (source.checked)
                {
                    lbl.innerHTML = 'Deselect All'
                    chkBoxCount[i].checked = true;
                
                else 
                {
                    lbl.innerHTML = 'Select All'
                    chkBoxCount[i].checked = false;
                }
           }
        
    </script>
    <rad:RadScriptManager runat="server" ID="radSM" AsyncPostBackTimeout="3600"></rad:RadScriptManager>
        <cc1:header id="Header1" title="My Maintenance" runat="server"></cc1:header>
        <asp:Panel ID="pnlMain" runat="server">
        <div>        
        <rad:RadSplitter runat="server" id="RadSplitter1"  Orientation="Vertical" width="98%" height="85%" LiveResize="True" HeightOffset="10" VisibleDuringInit="false" >
             <rad:RadPane runat="server" id="LeftPane" width="2%"  Collapsed="false">            
                <rad:RadSlidingZone ID="RadSlidingZone2" runat="server"  ExpandedPaneId="RadSlidingPane1" DockedPaneId="RadSlidingPane1">            
                <rad:RadSlidingPane ID="RadSlidingPane1" runat="server"  EnableDock="true"  MinWidth="355"
                    CollapseMode="Both" Title="Filter" TabView="TextOnly" Width="380px" >
                <asp:Panel ID="pnlHolder" runat="server">
                <vpw:MyLink ID="lnkMy" runat="server"  Type="MyPage" />            
                <br />
                    <asp:Panel id="pnlSelection" Width="95%" HorizontalAlign="Center" Runat="server" GroupingText="Filter Criteria" CssClass="BoldFont">
                    <br />
                        <table cellspacing="0" cellpadding="0" width="100%">
                            <tr>
                                <td valign="top" width="20%" align="left"></td>
                                <td ></td>
                            </tr>
                            <tr>
                                <td valign="top" width="20%" align="left">
                                    <asp:Label id="lblDepts" Runat="server" CssClass="BoldFont">Department:</asp:Label></td>
                                <td valign="top" align="left">
                                    <asp:dropdownlist ID="ddlDepts" runat="server" CssClass="StdFont">
                                    </asp:dropdownlist></td>
                            </tr>                                   
                            <tr>
                                <td valign="top" align="left">
                                    <asp:Label id="lblBranch" Runat="server" CssClass="BoldFont" > Branch:</asp:Label></td>
                                <td valign="top" align="left">
                                    <asp:Panel ID="pnlBranchList" runat="server"  Width="95%" Height="150px" ScrollBars="Auto">
                                        <asp:CheckBoxList ID="lblBranchSelection" runat="server"                                       
                                            Width="93%"  BorderWidth="1" BorderStyle="Solid" CssClass="StdFont" Font-Bold="false" >                             
                                        </asp:CheckBoxList>
                                         <asp:CheckBox ID="chkSelectAllList" runat="server" onclick="javascript:checkallList(this)" Text="Select All" />                                   
                                    </asp:Panel>
                                </td>
                            </tr>              
                            <tr>
                                <td valign="top" align="left"
                                     </td>
                                <td valign="top" align="left"
                                    </td>
                            </tr>                  
                       </table>
                    </asp:Panel
                    <br />
                    <asp:Panel ID="pnlFilter" Runat="server" Width="90%" HorizontalAlign="Center"  GroupingText="Additional Filter Criteria" CssClass="BoldFont">
                        <br />
                        <table cellspacing="0" cellpadding="0" width="100%">                               
                            <tr>
                                <td valign="top" align="right" >
                                    <asp:Label id="Label1" Runat="server" CssClass="BoldFont">Status: </asp:Label></td>
                                <td valign="top" align="left">                                  
                                        <asp:CheckBoxList ID="chklstStatus" runat="server"                                         
                                            Width="93%"  BorderWidth="2" BorderStyle="Inset"
                                            CssClass="StdFont" Font-Bold="false">                               
                                        </asp:CheckBoxList>
                                    <%--</asp:Panel>--%>                           
                                </td>                                           
                            </tr>                      
                            </table>                    
                    </asp:Panel
                    <asp:Panel ID="pnlButton" runat="server">
                        <table>
                            <tr>                           
                                <td valign="top" align="left">                      
                                    <asp:Button ID="btnRefreshGrid" runat="server" Text="Refresh Grid"  OnClick="btnRefreshGrid_Click"  >
                                    </asp:Button >                              
                                    </td>
                            </tr>
                                            </table>
                    </asp:Panel>
                </asp:Panel
                </rad:RadSlidingPane>
                </rad:RadSlidingZone>
             </rad:RadPane>
             <rad:RadSplitBar runat="server" id="RadSplitBar1" />
             <rad:RadPane runat="server" id="RightPane"  Width="100%">
               <rad:RadSplitter runat="server" id="InnerSplitter" Orientation="Horizontal" LiveResize="true" >
                 <rad:RadPane runat="server" id="TopPane" Height="30%" Width="98%">
                 <asp:Panel id="pnlGrid" Width="98%" HorizontalAlign="Center" Runat="server" borderwidth="0px" Height="98%">            
                    <rad:RadGrid id="RadGrid1"                                                                                                                                 
                            ShowStatusBar="false" 
                            runat="server" 
                            AllowPaging="True" 
                            AllowSorting="True"
                            AllowMultiRowSelection="False" 
                            AutoGenerateColumns="false"                                                                                                                                                 
                            EnableViewState="true" 
                            OnNeedDataSource="RadGrid1_NeedDataSource" 
                            OnItemCommand="RadGrid1_ItemCommand"                                                                                             
                            Width="100%"   Height="100%"  Skin="Windows7" AllowFilteringByColumn="true"  EnableLinqExpressions="false">
                            <MasterTableView  Width="98%" TableLayout="Fixed"  EnableViewState="true"  CommandItemDisplay="None"  >
                                <Columns>    
                                    <rad:GridTemplateColumn UniqueName="CheckBoxTemplateColumn" 
                                        HeaderStyle-Width="3%" 
                                        AllowFiltering="false"
                                        Resizable="false">                                    
                                        <ItemTemplate>
                                            <asp:CheckBox id="CheckBox1" OnCheckedChanged="ToggleRowSelection" AutoPostBack="True" runat="server"></asp:CheckBox>
                                        </ItemTemplate>
                                    </rad:GridTemplateColumn
                                    <rad:GridButtonColumn UniqueName="GridNewList" 
                                        ButtonType="ImageButton" 
                                        CommandName="NewList"
                                        HeaderStyle-Width="5%"  
                                        HeaderText="Add Rule"                                   
                                        Resizable="false" 
                                        ImageUrl="Images\Plus.png" >                                
                                    </rad:GridButtonColumn>
                                    <rad:GridBoundColumn                                     
                                        DataField="PublicKey" 
                                        DataType="System.String" 
                                        HeaderText="ID"    
                                        Visible="True"                                                   
                                        UniqueName="PublicKey"
                                        HeaderStyle-Width="55px"
                                        AllowFiltering="true" 
                                        Resizable="true" 
                                        HeaderStyle-HorizontalAlign="Center" 
                                        ItemStyle-HorizontalAlign="Center" >
                                        <ItemStyle />
                                    </rad:GridBoundColumn
                                    <rad:GridBoundColumn                                     
                                        DataField="Key" 
                                        DataType="System.Int32" 
                                        HeaderText=" ID Key"    
                                        Visible="False"                                                   
                                        UniqueName="Key"
                                        HeaderStyle-Width="30px"
                                        AllowFiltering="false" 
                                        Resizable="false">
                                        <ItemStyle />
                                    </rad:GridBoundColumn>                                                                                  
                                    <rad:GridBoundColumn 
                                        DataField="Name" 
                                        DataType="System.String" 
                                        HeaderText="Name"                                                       
                                        UniqueName="Name"     
                                        HeaderStyle-HorizontalAlign="Center" 
                                        ItemStyle-HorizontalAlign="Center" 
                                        HeaderStyle-Width="15%" 
                                        AllowFiltering="true">
                                        <ItemStyle />
                                    </rad:GridBoundColumn
                                    <rad:GridBoundColumn 
                                        DataField="Status" 
                                        DataType="System.String" 
                                        HeaderText=" Status"                                                       
                                        UniqueName="Status" 
                                        HeaderStyle-HorizontalAlign="Center" 
                                        ItemStyle-HorizontalAlign="Left" 
                                        HeaderStyle-Width="40px" 
                                        AllowFiltering="false"
                                        Visible="true"
                                        Resizable="false">
                                        <ItemStyle />
                                    </rad:GridBoundColumn>                                                                                              
                                </Columns>                           
                            </MasterTableView>
                            <ClientSettings EnableRowHoverStyle="true" 
                                            Resizing-AllowColumnResize="true"
                                            Resizing-AllowRowResize="false"  
                                            Resizing-EnableRealTimeResize ="false"                                                     
                                            Resizing-ClipCellContentOnResize ="false"                                         
                                            AllowColumnsReorder="true"
                                            EnablePostBackOnRowClick="true" >                                                    
                                <Scrolling AllowScroll ="true" UseStaticHeaders="true"  />                                                                 
                            </ClientSettings>
                            <PagerStyle   Mode="NextPrevAndNumeric" Height="10px"  VerticalAlign="Bottom" Position="Bottom"></PagerStyle>
                        </rad:RadGrid>        
                    </asp:Panel>        
                 </rad:RadPane>
                 <rad:RadSplitBar runat="server" id="RadSplitBar2" EnableResize="true"  Height="100%"/>
                 <rad:RadPane runat="server" id="BottomPane" Width="98%" >
                    <iframe id="frm1" runat="server" width="100%" height="100%" frameborder="0"></iframe>
                 </rad:RadPane>
               </rad:RadSplitter>
             </rad:RadPane>         
            </rad:RadSplitter>         
         </div>
        </asp:Panel>
        <cc1:footer id="Footer1" runat="server" Height="11px" ></cc1:footer>       
        </form>    
    </body>
    </html>

    Please advise on what I'm missing. thanks.
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 29 Aug 2011 Link to this post

    Hi Pete,

    In order to use percentage values for the RadSplitter's Height property you need to make sure that all its parents have set height, including <html>, <body> and <form> elements. Please review the following help article for more information on the subject:
    Filling the Entire Page

    Regards,
    Dobromir
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top