Splitter height inconsistencies

5 posts, 0 answers
  1. Adam
    Adam avatar
    70 posts
    Member since:
    Jun 2008

    Posted 01 Aug 2008 Link to this post


    We've been working with the Telerik controls for a while now, without all that much difficulty, but the Splitter really seems to not be working as desired.  Our client, as most would, want their site to display at any resolution in IE6, and there will be multiple pages where the body content will surpass the normal screen bounds due to very large RadGrids.

    Anyways, we have an expanding RadSplitter sandwiched between a header and a footer, with no scrolling for the actual RadPanes.  So far, this set up has worked well until now.  Testing the site in FF3 presents us with a nice layout that extends the height of the content which it should.  Also, anytime we collapse or expand any Panelbars within the RadPane, the content page will expand or collapse, and the splitter, and thereby the window, will expand or shrink.

    In IE6 however, the Splitter looks as though it calculates the correct height on INIT, but then shrinks to the same height on every page, regardless of how much content.  Expanding or collapsing the Panelbars only reveals content in this small 'view'; it does not actually resize the RadPane at all.  

    I know there are inconsistencies between browsers, but juggling this large of a difference is a pain and very draining to diagnose.  If there is a way to cancel that after Init resize, I imagine it would work.

    <%--  
      $Date$  
      $Author$  
      $Revision$  
         
      (C)2008 CGI, Inc.  
        
      THIS PROGRAM IS PROPRIETARY AND IS THE PROPERTY OF: CGI, INC  
     
      COPYING OR USE OF THIS PROGRAM, EXCEPT AS SPECIFICALLY PROVIDED FOR IN A  
      LICENSE AGREEMENT CONTROLLING SUCH USE, IS PROHIBITED.  
     
      This program is designated as CONFIDENTIAL and is a trade secret under  
      applicable laws.  Unauthorized copying or disclosure is prohibited and is  
      subject to criminal and civil penalties, including fines and imprisonment.  
    --%> 
     
    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="ReachMasterPage" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!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" > 
    <head runat="server" id="HeadMaster">  
        <title></title>  
        <link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
        <form id="form1" runat="server" method="post">  
          <asp:ScriptManager ID="ScriptManager1" runat="server">  
          </asp:ScriptManager> 
          <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
          </telerik:RadAjaxManager> 
          <div id="master_page">  
            <div id="master_header_top">  
              <div id="master_icon">  
                <asp:Image ID="imgCgiLogo" runat="server" ImageUrl="~/Images/cgilogo.gif" /> 
              </div> 
              <div id="master_login" style="height: 22px">  
                <span style="font-size: 11pt; font-weight:bold; color: red; font-family: 'Times New Roman';">Welcome Paul!</span>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size: 8pt; color: blue; font-family: 'Times New Roman'; text-decoration: underline">Logout</span> 
              </div> 
              <div id="master_header_right">  
                <asp:SiteMapPath ID="SiteMapPath1" runat="server" CssClass="Breadcrumb" PathSeparator=" : " > 
                            <PathSeparatorStyle Font-Bold="True" ForeColor="#FFFFFF" /> 
                            <CurrentNodeStyle ForeColor="#FFFFFF" /> 
                            <NodeStyle Font-Bold="True" ForeColor="#FFFFFF" CssClass="Breadcrumb" /> 
                            <RootNodeStyle Font-Bold="True" ForeColor="#FFFFFF" CssClass="Breadcrumb" /> 
                </asp:SiteMapPath> 
              </div> 
            </div> 
            <div id="master_middle">  
              <telerik:RadSplitter id="RadSplitter1" runat="server" Height="100%" Width="1500px" VisibleDuringInit="false" ResizeMode="EndPane" ResizeWithParentPane="true" ResizeWithBrowserWindow="true" Skin="Office2007">              
                <telerik:RadPane id="Radpane1" runat="server" Width="22px" Scrolling="None" Height="800px">  
                    <telerik:RadSlidingZone id="SlidingZone1" runat="server" width="22px" DockedPaneId="Nav" ExpandedPaneId="Nav" SlideDirection="Right">  
                        <telerik:RadSlidingPane id="Nav" Height="800px" title="Navigation" runat="server" Width="173px" Scrolling="Both" CssClass="slideContainer">  
                          <telerik:RadAjaxPanel ID="NavRadAjaxPanel" runat="server">  
                              <div> 
                                <div style="float:right; padding-right:2px;">  
                                  <asp:LinkButton ID="lnkbtnExpandAll" runat="server" CssClass="TreeNodeLinkButton" OnClick="lnkbtnExpandAll_Click">Expand All</asp:LinkButton> 
                                  <asp:LinkButton ID="lnkbtnCollapseAll" runat="server" CssClass="TreeNodeLinkButton" OnClick="lnkbtnCollapseAll_Click">Collapse All</asp:LinkButton> 
                                </div> 
                                <div style="clear:both; overflow:hidden;">  
                                  <telerik:RadTreeView ID="RadTreeView1" runat="server" DataSourceID="SiteMapDS" DataFieldID="Title" DataNavigateUrlField="Url" DataTextField="Title" SingleExpandPath="False" CssClass="TreeNode" Width="100%" style="white-space:normal;" BackColor="White" Font-Size="8pt" Skin="Outlook">                        
                                    <CollapseAnimation Duration="100" Type="OutQuint" /> 
                                    <ExpandAnimation Duration="100" /> 
                                  </telerik:RadTreeView> 
                                </div> 
                              </div> 
                          </telerik:RadAjaxPanel>   
                        </telerik:RadSlidingPane>                         
                    </telerik:RadSlidingZone> 
                </telerik:RadPane> 
                <telerik:RadSplitBar id="Radsplitbar3" runat="server" CollapseMode="Forward" /> 
                <telerik:RadPane ID="MasterPageRadContentPane" runat="server" MinHeight="1000" MinWidth="800" Scrolling="None">                    
                  <div id="master_contenttitle">  
                    <asp:Label ID="lblContentTitle" runat="server" Font-Bold="True" Font-Size="12pt"></asp:Label> 
                  </div> 
                  <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">    
                  </asp:ContentPlaceHolder>      
                </telerik:RadPane>               
              </telerik:RadSplitter> 
              </div>   
              <div id="master_footer">  
                Copyright CGI 2008  
              </div>            
          </div> 
          <asp:SiteMapDataSource ID="SiteMapDS" runat="server" SiteMapProvider="REACHSiteMap" /> 
        </form> 
    </body> 
    </html> 

    Style Sheet
    body, p, h1, h2, h3, h4, table  
    {  
        font-size:10pt;  
        font-family:TahomaArial;  
        margin:0;  
        padding:0;  
        border:none;  
    }  
     
    body  
    {  
        /*background: #B4B4B4 url(images/body_bg.gif) repeat left top;*/ 
        height:100%;  
        width:100%;  
        font-size:10pt;  
        font-family:Arial;  
    }  
     
    #master_page  
    {  
        height:100%;      
    }  
     
    /* Header Layout */ 
    #master_header_top  
    {  
        background-color#110E93;  
        width:100%;  
        border-bottom:solid 1px Gray;  
    }  
     
    #master_header_left  
    {  
        height:100%;  
        width:250px;  
        float:left;  
    }  
     
    #master_icon  
    {  
        clear:both;  
        width: 100%;   
        height55px;  
        background-color:White;      
    }  
     
    #master_header  
    {  
        background-color#C8D6E6;  
    }  
     
    #master_header_right  
    {  
        padding-top3px;  
        height22px;  
        padding-bottom0px;  
    }  
     
    #master_header_right_top   
    {  
        width:100%;  
        height:55px;  
        background-color:White;   
    }  
     
    #master_login  
    {  
        background-color#C8D6E6;  
        padding-top:2px;  
        padding-left:5px;  
        width200px;  
        height:22px;  
        float:left;  
        clear:both;  
    }  
     
    /* Middle Section Layout */ 
     
    #master_middle  
    {  
    }  
     
    #master_menu  
    {  
        /*float:left;*/ 
    }  
     
    .master_contentbody  
    {  
    }  
     
    #master_contenttitle  
    {  
        width:70%;  
        margin-left:10px;  
        border-bottomsolid 2px #888888;  
    }  
     
    /* Footer */ 
     
    #master_footer  
    {  
        background-color#110E93;  
        font-size:8pt;  
        width:100%;  
        height:18px;  
        padding-top:2px;  
        padding-left:45%;  
        clear:both;   
        color:White;  
    }  
     
    /* Tree style RadGrid styles */ 
    .OutlookTopBar  
    {  
        background-colorwhite;  
        background-repeatrepeat-x;  
        padding-top3px;  
        border1px solid #002D96;  
        width180px;  
        font-size11px;  
        padding-left4px;  
    }  
     
    .TreeviewGrid Table  
    {  
        margin-top7px;  
        border:0px;  
    }  
     
    .TreeviewGrid a  
    {  
        color#000000;  
        text-decorationunderline;  
    }  
     
    .TreeviewGrid td  
    {  
        font-size11px;  
        border:0px;  
    }  
     
     
     
    .SelectedFolder  
    {  
        font-weightbold;  
    }  
     
    .OutlookTable  
    {  
        background-color:#c4dafa;  
        margin-top:4px;  
    }  
     
    .MailSubject  
    {  
        color#808080;  
    }  
     
    .SelectedRow_Outlook .MailSubject  
    {  
        colorwhite;  
    }  
     
    /* Styles for the Treeview on the master page */ 
     
    .TreeMenu   
    {  
        font-family:Arial;  
        background-color:White;  
        color:#678CB9;  
        width:210px;  
    }  
     
    .TreeNodeLinkButton  
    {  
        color:#15428B;  
        text-decoration:none;  
        font-size:7pt;     
    }  
     
    .TreeNode   
    {  
        color:#15428b;     
    }  
     
    .TreeNode a   
    {  
        color:#15428b;  
        background-color:White;  
    }  
     
    .TreeNode a:visited  
    {  
        color:#15428b;   
        background-color:White;    
    }  
     
    .TreeNode a:hover  
    {  
        text-decoration:none;  
        color:Red;   
        background-color:White;    
    }  
     
    .TreeNode a:active  
    {  
        color:Red;   
        background-color:White;    
    }  
     
     
     
    .slideContainer {  
        border:0px solid #073b96;  
        border-collapse:collapse;  
        background-color:White;  
    }  
     
     
    #master_content  
    {  
        width:100%;  
        height:80%;  
        float:left;   
        clear:both;  
        margin-left:10px;    
    }  
     
    .master_menu   
    {  
           
    }  
     
    div.menuTables   
    {  
        font-size:10pt;   
        font-family:Arial;   
        font-weight:bold;     
    }  
     
    table.menuTables   
    {  
        margin-left:20px;   
        margin-top:20px;   
        border:0;      
    }  
     
    table.menuTables td   
    {  
        width:615px;     
    }  
     
    table.useHeaderMenu  
    {  
        margin-left:10px;  
    }  
     
    table.useHeaderMenu td  
    {  
        vertical-align:top;  
        font-size:7pt;  
    }  
     
    table.useHeaderMenu a  
    {  
        text-decoration:none;  
    }  
     
    table.formFields  
    {  
          
    }  
     
    .collapsible   
    {  
        font-size:8pt;  
        font-family:Arial;  
        vertical-align:middle;  
        margin-top:10px;  
        margin-left:10px;  
        margin-bottom:10px;  
        margin-right:10px;  
        whitewhite-spacenormal !important;    
     
    }  
     
    .collapsible img.handle  
    {  
        text-align:rightright;  
        MARGIN-TOP: 5px;   
        margin-right:20px;  
        margin-left:300px;     
        position:relative;  
    }  
     
    .invisible  
    {  
        display:none;  
        visibility:hidden;  
    }  
     
    .visible 
    {  
        visibility:visible;  
    }  
     
    .TabStrip  
    {  
        border:solid 1px Gray;  
    }  
     
    .PageView  
    {  
        vertical-align:middle;  
        padding-top:10px;  
        margin-left:10px;  
        margin-bottom:10px;  
        margin-right:10px;  
        whitewhite-spacenormal !important;   
    }  
     
    .Breadcrumb  
    {  
        font:bold 11px ArialVerdanaSans-serif;  
        padding-left5px;  
        margin-top2px;  
    }  
     
    .Breadcrumb a  
    {  
        text-decoration:none;     
    }  
     
    .Breadcrumb a:hover  
    {  
        text-decoration:underline;          
    }  
     
    ThresholdLabel   
    {  
        font-weight:bold;     

    Very discouraging.  But hopefully, with your knowledge and my cooperation, we can figure this out.

    Thanks a lot.
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 Aug 2008 Link to this post

    Hi Adam,

    I tried to test your code but I had to comment some of it in order to successfully run it and I am also not quite sure that I understand you correctly. What I can suggest to do to get the same behavior under all browsers is the following:

    1. Include this CSS in the page's head:

       <style type="text/css">  
          html, body, form  
          {  
            height: 100%;  
            padding0px;  
            margin0px;  
          }  
          </style> 
    2. I recommend to use the RadSplitter's HeightOffset property and set it to the resultant sum of the heights of the header and the footer. This will ensure that the splitter will always occupy the all available space except for the header and footer.
    3. As far as I understood, you expect the RadSplitter to resize according to its content, e.g when you expand/collapse the RadPanelBar. This functionality is not available for the RadSplitter out of the box, but you can easily achieve the desired behavior by using javascript as discussed here

    If you need further assistance, please open a new support ticket and send me a sample, reproduction demo along with a detailed explanation of the reproduction steps and some screenshots. Once I receive this information, I will do my best to help.

    Sincerely yours,
    Svetlina
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Adam
    Adam avatar
    70 posts
    Member since:
    Jun 2008

    Posted 11 Aug 2008 Link to this post


    Though I believe that link is broken for me, so far so good.  The only problem I'm having now is that a resize on load is not enough.  I'm going to have to wire it up in such a way that some events inside the content panel, like changing the paging size of a grid inside the panel bar, collapsing or expanding a panel, etc.  will also trigger a resize of the master page splitter.  If there's a good way you know of to do this, please let me know. 

    Thanks for the help so far,

    Adam.g
  4. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 14 Aug 2008 Link to this post

    Hi Adam,
    Yes, you are correct for the link - I just fixed it to point to the correct address. For your convenience, I give you the link here as well.

    As for your additional question - you can either execute a method every 100 milliseconds, for example (you can use the setInterval method), that will check whether the scrollHeight of the RadPane has changed (in case it has - recalculate the height of the splitter), or handle all events that might change the scrollHeight of the RadPane. Please note that this is not connected to the RadSplitter control and the best implementation depends on your particular scenario.

    All the best,
    Tsvetie
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Adam
    Adam avatar
    70 posts
    Member since:
    Jun 2008

    Posted 14 Aug 2008 Link to this post


    Actually, I'm sorry for not posting a response earlier but, while we haven't discovered any method for getting the width to expand with content, we've discovered a codeless method for height expansion with content, which is supported!  As I stated earlier, FF3 and IE7 supported this naturally; it was only IE6 that we had a problem with.  With Scrolling="None", if I remember correctly, the RadPane's div overflow CSS property gets set to hidden. 

    However, if you set a CssClass on the RadPane, and within that class you set
    overflow: visible !important; to the class..voila!  IE6 handles the Splitter height precisely as we expect it to.  I'm sure you can imagine how happy we were to see that we did not have to hack our way or programmatically alter our heights.  Hopefully this helps anyone wishing to gain the same behavior out of the RadSplitter.

    I haven't researched the width problem much, and we aren't in a current position to worry about it much yet, so please feel free to consider this thread answered.  Thanks so much for your guidance.

    Adam.g
Back to Top