Splitter works in IE, not FF

2 posts, 0 answers
  1. Laura
    Laura avatar
    131 posts
    Member since:
    Aug 2008

    Posted 29 Apr 2009 Link to this post

    I have a radsplitter that has a left pane with a menu, and a right pane that loads content based on what is clicked on the left menu and it is loaded from a table. It is supposed to fill the screen of the browser.

    It loads full screen in IE, but in FF it only appears as about 1/4 inch on top. It is not being shrunk to 1/4 inch on top, but only the top 1/4 inch of the screen is being filled in, with a thin blue line at cutting it off.  This is my code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CUTE.aspx.cs" Inherits="ContentCentral.CUTE" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
    <html xmlns="http://www.w3.org/1999/xhtml">   
    <head id="Head1" runat="server">   
        <title>CUTE - Content/Users/Transactions/Entitlements</title> 
        <style type="text/css"
         html, body, form   
            height: 100%;   
            margin: 0px;   
            padding: 0px;   
            overflow: hidden;   
        <form id="form1" runat="server"  > 
         <telerik:RadScriptManager ID="RadScriptManager1" runat="server" OutputCompression="AutoDetect"></telerik:RadScriptManager> 
         <telerik:RadAjaxPanel ID="radAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" runat="server"
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="10"
            <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
                style="border: 0px;" /> 
     <div id="ParentDivElement" style="height: 100%;">  
            <telerik:RadSplitter ID"RadSplitter1" runat="server" Orientation="Vertical"   Skin="Office2007"   ResizeMode="AdjacentPane" width="100%"  
                    VisibleDuringInit="false" Height="100%" LiveResize="true"
             <telerik:RadPane id="leftPane" runat="server"    width="22"   minwidth="22"
               <telerik:RadSlidingZone id="SlidingZone1" runat="server" width="22" clicktoopen="true" SkinID="Office2007" DockedPaneId="Menu" ExpandedPaneId="Menu" > 
                <telerik:RadSlidingPane id="Menu" title="CUTE" runat="server" width="200"  SkinID="Office2007" Scrolling="Both" EnableResize="false" > 
                  <telerik:RadPanelBar ID="RadPanelBar1" runat="server" DataSourceID="panelGroups"  width="180" Height="80%" 
                    AllowCollapseAllItems="True"  ExpandMode="SingleExpandedItem"    onclientitemclicked="itemClicked"   
                    Skin="Office2007" DataFieldID="id" DataFieldParentID="ParentID"  
                    DataTextField="Text"  DataValueField="NavigateURL" > 
                    <CollapseAnimation Type="InOutExpo" Duration="100"></CollapseAnimation> 
              <telerik:RadSplitBar id="Radsplitbar3" runat="server" collapsemode="Forward" EnableResize="false" /> 
              <telerik:RadPane id="contentPane" runat="server"  Scrolling="Both"  Height="100%"  >   
        <asp:SqlDataSource ID="panelGroups" runat="server"  
             ConnectionString="<%$ ConnectionStrings:CC2ConnectionString2 %>"  
                 SelectCommand="SELECT id, parentID, text, value, navigateURL, active FROM CUTEPanelGroups WHERE (active = @Active) ORDER BY id"
                <asp:Parameter DefaultValue="Y" Name="Active" Type="String" /> 
     <script type="text/javascript"
         function itemClicked(sender, eventArgs) { 
             var item = eventArgs.get_item(); 
             var link = item.get_value(); 
             if (link != null) { 
                 var splitter = $find("<%= RadSplitter1.ClientID %>"); 
                 var pane = splitter.getPaneById("contentPane"); 
                 var urlArgs = cbeGetURLArguments(); 
                 var userName = urlArgs.NAME; 
                 var sync = urlArgs.SYNC 
                 var querystring = '?SYNC=' + sync + '&NAME=' + userName; 
                 linklink = link + querystring; 
             var x = 1
         function cbeGetURLArguments() { 
             var idx = location.href.indexOf('?'); 
             var params = new Array(); 
             if (idx != -1) { 
                 var pairs = location.href.substring(idx + 1, location.href.length).split('&'); 
                 for (var i = 0; i < pairs.length; i++) { 
                     nameVal = pairs[i].split('='); 
                     params[i] = nameVal[1]; 
                     params[nameVal[0]] = nameVal[1]; 
             return params; 

  2. Svetlina Anati
    Svetlina Anati avatar
    2795 posts

    Posted 01 May 2009 Link to this post

    Hello Laura,

    Thank you for the provided code, I built up a test demo based on it and I was able to reproduce the problem. I see from your code that you know that when the splitter size is set in percentages you should set explicit height to all its parent elements and you have done this correctly. However, the RadAjaxpanel is rendered as two DIV elements and since the splitter is nested in it, you should also set their height. In order to get the desired result, you should add the following style to your page:

     #radAjaxPanel1Panel, #radAjaxPanel1  
         height: 100%;  

    After I did this, the problem disappeared and for your convenience I attached my test page to the thread.

    Kind regards,
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top