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

[Solved] RadSplitter and Firefox 3

3 Answers 118 Views

Splitter

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

Chris asked on 04 May 2009, 08:35 PM

I am attempting to have a view that is similar to Exchange OWA. It works great in IE 7.0, but in Firefox 3, I cannot get it to show the full contents of the page. Here are some screenshots:

In IE, the desired result.
Firefox Cuts It Off

Here's the page definition:

    
            <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <%@ Register Src="Controls/QueueTree.ascx" TagName="QueueTree" TagPrefix="uc1" %> 
        
            <%@ Register Src="Controls/TaskListPanel.ascx" TagName="TaskListPanel" TagPrefix="uc2" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">  
        
            <head runat="server">  
        
                <title></title>  
        
            </head> 
        
            <body style="margin: 0px; height: 100%; overflow: hidden;">  
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="pageScriptManager" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <telerik:RadToolBar ID="tbSystemMain" runat="server" Skin="WebBlue" Width="100%" AutoPostBack="true">  
        
                    <Items> 
        
                        <telerik:RadToolBarButton runat="server" Text="New Ticket" CommandName="NewTicket">  
        
                        </telerik:RadToolBarButton> 
        
                        <telerik:RadToolBarButton runat="server" IsSeparator="True">  
        
                        </telerik:RadToolBarButton> 
        
                        <telerik:RadToolBarButton runat="server" Text="Knowledge Base" NavigateUrl="KnowledgeBase.aspx">  
        
                        </telerik:RadToolBarButton> 
        
                        <telerik:RadToolBarButton runat="server" IsSeparator="True">  
        
                        </telerik:RadToolBarButton> 
        
                        <telerik:RadToolBarButton runat="server" Text="My Preferences" CommandName="UserPreferences">  
        
                        </telerik:RadToolBarButton> 
        
                    </Items> 
        
                </telerik:RadToolBar> 
        
                <telerik:RadSplitter ID="spltMainPage" runat="server" Skin="WebBlue" Width="100%" 
        
                    Height="100%">  
        
                    <telerik:RadPane ID="paneLeftNavigation" Width="300px" MaxWidth="400" MinWidth="250" runat="server">  
        
                        <telerik:RadPanelBar ID="pnlBarMain" runat="server" Skin="WebBlue" Width="100%">  
        
                            <Items> 
        
                                <telerik:RadPanelItem runat="server" Text="Queues" Expanded="true" PreventCollapse="true">  
        
                                    <ItemTemplate> 
        
                                        <uc1:QueueTree ID="queueList" runat="server" /> 
        
                                    </ItemTemplate> 
        
                                </telerik:RadPanelItem> 
        
                                <telerik:RadPanelItem runat="server" Text="Tasks" PreventCollapse="false" Expanded="false">  
        
                                    <Items> 
        
                                        <telerik:RadPanelItem runat="server">  
        
                                            <ItemTemplate> 
        
                                                <uc2:TaskListPanel ID="taskList" runat="server" /> 
        
                                            </ItemTemplate> 
        
                                        </telerik:RadPanelItem> 
        
                                    </Items> 
        
                                </telerik:RadPanelItem> 
        
                                <telerik:RadPanelItem runat="server" Text="My Statistics" PreventCollapse="false" 
        
                                    Expanded="false">  
        
                                </telerik:RadPanelItem> 
        
                            </Items> 
        
                        </telerik:RadPanelBar> 
        
                    </telerik:RadPane> 
        
                    <telerik:RadSplitBar ID="sbLeftNavTicketList" runat="server" /> 
        
                    <telerik:RadPane Scrolling="Y" ID="paneWorkingWindow" runat="server" ContentUrl="~/SubPages/TicketList.aspx?ID=-1" /> 
        
                </telerik:RadSplitter> 
        
                </form> 
        
            </body> 
        
            </html>

I am following the recommendations in the documentation concerning styles to render in a full page. Notice the style attribute on lines 7 and 11.

Why am I getting this rendering problem?

3 Answers, 1 is accepted

Accepted

answered on 06 May 2009, 01:44 PM

splitterpage.zip

Hello Chris,

I built up a test page based on your code and I was able to reproduce the problem. The difference in the layout is caused by the float: left setting of the toolbar under FF.

In order to fix this problem I suggest to insert the following DIV element after the toolbar declaration:

    
             <telerik:RadToolBar ID="tbSystemMain" runat="server" Skin="WebBlue" Width="100%" 
        
                        AutoPostBack="true">  
        
                        <Items> 
        
                            <telerik:RadToolBarButton runat="server" Text="New Ticket" CommandName="NewTicket">  
        
                            </telerik:RadToolBarButton> 
        
                            <telerik:RadToolBarButton runat="server" IsSeparator="True">  
        
                            </telerik:RadToolBarButton> 
        
                            <telerik:RadToolBarButton runat="server" Text="Knowledge Base" NavigateUrl="KnowledgeBase.aspx">  
        
                            </telerik:RadToolBarButton> 
        
                            <telerik:RadToolBarButton runat="server" IsSeparator="True">  
        
                            </telerik:RadToolBarButton> 
        
                            <telerik:RadToolBarButton runat="server" Text="My Preferences" CommandName="UserPreferences">  
        
                            </telerik:RadToolBarButton> 
        
                        </Items> 
        
                    </telerik:RadToolBar> 
        
                    <div style="clear: both; height: 1px; margin-bottom: -1px;">  
        
                    </div>

I also noticed that you have set explicit height to the html and body elements but not to the form one - in order to correctly configure the splitter, please insert the following style in the page's head:

    
              <style type="text/css">  
        
                html, body, form  
        
                {  
        
                    height: 100%;  
        
                    margin: 0;  
        
                    padding: 0;  
        
                    overflow: hidden;  
        
                }  
        
                </style>

And last - since you have a splitter configured to 100% and also there is an external element outside this splitter, the sum of the heights will exceed 100% of the viewport - in order to get the splitter occupy exactly 100% of the page except for the toolbar, you should set the HeightOffset property to the height of the toolbar, e.g 30.

I applied the above explained modifications to the test page and I believe that this improved the layout in order to better meet your requirements - for your convenience I attached it to the thread.

All the best,

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.