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

Splitter works in IE, not FF

1 Answer 60 Views

Splitter

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

Laura asked on 30 Apr 2009, 02:00 AM

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;   
        
                }   
        
                </style> 
        
            </head> 
        
            <body> 
        
                <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;" /> 
        
                </telerik:RadAjaxLoadingPanel> 
        
             <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:RadPanelBar> 
        
                        </telerik:RadSlidingPane> 
        
                       </telerik:RadSlidingZone> 
        
                      </telerik:RadPane> 
        
                      <telerik:RadSplitBar id="Radsplitbar3" runat="server" collapsemode="Forward" EnableResize="false" /> 
        
                      <telerik:RadPane id="contentPane" runat="server"  Scrolling="Both"  Height="100%"  >   
        
                      </telerik:RadPane> 
        
                     </telerik:RadSplitter> 
        
             </div>   
        
                <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"> 
        
                    <SelectParameters> 
        
                        <asp:Parameter DefaultValue="Y" Name="Active" Type="String" /> 
        
                    </SelectParameters> 
        
                 </asp:SqlDataSource> 
        
                 </telerik:RadAjaxPanel> 
        
                </form> 
        
            </body> 
        
             <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; 
        
                         pane.set_contentUrl(link); 
        
                     } 
        
                     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; 
        
                 } 
        
             </script> 
        
            </html>

1 Answer, 1 is accepted

answered on 01 May 2009, 03:14 PM

radsplitter.zip

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,
Svetlina
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.