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

RadSplitter and Firefox 3

3 Answers 85 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
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

Sort by
0
Accepted
Svetlina Anati
Telerik team
answered on 06 May 2009, 01:44 PM

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;  
        overflowhidden;  
    }  
    </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.
0
Chris
Top achievements
Rank 1
answered on 06 May 2009, 01:55 PM
Svetlina,

Thank you so much for the assistance! That works beautifully!
0
Svetlina Anati
Telerik team
answered on 07 May 2009, 02:57 PM
Hello Chris,

I am glad I could help, in case you experience further problems or need assistance, do not hesitate to contact us again.

Sincerely yours,
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.
Tags
Splitter
Asked by
Chris
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Chris
Top achievements
Rank 1
Share this question
or