RadSplitter and Firefox 3

4 posts, 1 answers
  1. Chris
    Chris avatar
    35 posts
    Member since:
    Mar 2008

    Posted 04 May 2009 Link to this post

    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:
    1 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
    2  
    3 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    4 <%@ Register Src="Controls/QueueTree.ascx" TagName="QueueTree" TagPrefix="uc1" %> 
    5 <%@ Register Src="Controls/TaskListPanel.ascx" TagName="TaskListPanel" TagPrefix="uc2" %> 
    6 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    7 <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">  
    8 <head runat="server">  
    9     <title></title>  
    10 </head> 
    11 <body style="margin: 0px; height: 100%; overflow: hidden;">  
    12     <form id="form1" runat="server">  
    13     <telerik:RadScriptManager ID="pageScriptManager" runat="server">  
    14     </telerik:RadScriptManager> 
    15     <telerik:RadToolBar ID="tbSystemMain" runat="server" Skin="WebBlue" Width="100%" AutoPostBack="true">  
    16         <Items> 
    17             <telerik:RadToolBarButton runat="server" Text="New Ticket" CommandName="NewTicket">  
    18             </telerik:RadToolBarButton> 
    19             <telerik:RadToolBarButton runat="server" IsSeparator="True">  
    20             </telerik:RadToolBarButton> 
    21             <telerik:RadToolBarButton runat="server" Text="Knowledge Base" NavigateUrl="KnowledgeBase.aspx">  
    22             </telerik:RadToolBarButton> 
    23             <telerik:RadToolBarButton runat="server" IsSeparator="True">  
    24             </telerik:RadToolBarButton> 
    25             <telerik:RadToolBarButton runat="server" Text="My Preferences" CommandName="UserPreferences">  
    26             </telerik:RadToolBarButton> 
    27         </Items> 
    28     </telerik:RadToolBar> 
    29     <telerik:RadSplitter ID="spltMainPage" runat="server" Skin="WebBlue" Width="100%" 
    30         Height="100%">  
    31         <telerik:RadPane ID="paneLeftNavigation" Width="300px" MaxWidth="400" MinWidth="250" runat="server">  
    32             <telerik:RadPanelBar ID="pnlBarMain" runat="server" Skin="WebBlue" Width="100%">  
    33                 <Items> 
    34                     <telerik:RadPanelItem runat="server" Text="Queues" Expanded="true" PreventCollapse="true">  
    35                         <ItemTemplate> 
    36                             <uc1:QueueTree ID="queueList" runat="server" /> 
    37                         </ItemTemplate> 
    38                     </telerik:RadPanelItem> 
    39                     <telerik:RadPanelItem runat="server" Text="Tasks" PreventCollapse="false" Expanded="false">  
    40                         <Items> 
    41                             <telerik:RadPanelItem runat="server">  
    42                                 <ItemTemplate> 
    43                                     <uc2:TaskListPanel ID="taskList" runat="server" /> 
    44                                 </ItemTemplate> 
    45                             </telerik:RadPanelItem> 
    46                         </Items> 
    47                     </telerik:RadPanelItem> 
    48                     <telerik:RadPanelItem runat="server" Text="My Statistics" PreventCollapse="false" 
    49                         Expanded="false">  
    50                     </telerik:RadPanelItem> 
    51                 </Items> 
    52             </telerik:RadPanelBar> 
    53         </telerik:RadPane> 
    54         <telerik:RadSplitBar ID="sbLeftNavTicketList" runat="server" /> 
    55         <telerik:RadPane Scrolling="Y" ID="paneWorkingWindow" runat="server" ContentUrl="~/SubPages/TicketList.aspx?ID=-1" /> 
    56     </telerik:RadSplitter> 
    57     </form> 
    58 </body> 
    59 </html> 
    60  

    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?
  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 06 May 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chris
    Chris avatar
    35 posts
    Member since:
    Mar 2008

    Posted 06 May 2009 Link to this post

    Svetlina,

    Thank you so much for the assistance! That works beautifully!
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 07 May 2009 Link to this post

    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.
Back to Top