Splitter and IE8 rendering differences

2 posts, 0 answers
  1. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 06 May 2009 Link to this post

    Under IE7 i have my splitters set up so that they are in fullscreen mode, but under IE8 i notice that they no longer fill the screen.  Is this something i can change in settings so that it renders full screen again?

    Below are two links with pictures showing what is happening for IE 8 native and IE8 with Compatibility View On.

    IE8
    IE8 Compatibility View On

    This is my code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadTools3._Default" %> 
     
    <%@ 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"> 
     
    <script runat="server">  
     
        protected void RadMenu1_ItemClick(object sender, RadMenuEventArgs e)  
        {  
            this.Label1.Text = e.Item.Text;  
        }  
    </script> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server">  
        <title>Untitled Page</title> 
        <style type="text/css">  
     
        html, body, form    
        {    
            height: 100%;    
            margin: 0px;    
            padding: 0px;    
            overflow: hidden;    
        }    
     
     
     
    .RadToolBar_Default_Horizontal  
    {  
        background: transparent url('mvwres://Telerik.Web.UI, Version=2009.1.402.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.ToolBar.ToolbarBgHTL.gif') no-repeat;  
    }  
     
    .RadToolBar  
    {  
        float: left;  
        overflow: hidden;  
        white-space: nowrap;  
    }  
     
    .RadToolBar  
    {  
        margin: 0;  
        padding: 0;  
    }  
     
            .RadToolBar_Default .rtbOuter  
    {  
        border: 1px solid #9c9c9c;  
    }  
     
    .RadToolBar_Default .rtbMiddle  
    {  
        border: 1px solid #efefef;  
        background: #fafafa url('mvwres://Telerik.Web.UI, Version=2009.1.402.35, Culture=neutralPublicKeyToken=121fae78165ba3d4/Telerik.Web.UI.Skins.Default.ToolBar.rtbControlBg.png') repeat-x 0 100%;  
    }  
     
            </style> 
    </head> 
    <body style="overflow: hidden">  
        <form id="form1" runat="server">  
        <telerik:RadWindowManager ID="RWM" runat="server" DestroyOnClose="True"   
            KeepInScreenBounds="True" MinimizeZoneID="MinZone" Skin="Outlook" RestrictionZoneID="RadAjaxPanel3">  
        </telerik:RadWindowManager> 
        <telerik:RadScriptManager runat="server">  
            <Scripts> 
                <asp:ScriptReference Path="~/helper.js" /> 
            </Scripts> 
        </telerik:RadScriptManager> 
        <div> 
            <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal"   
                Height="100%" Width="100%">  
                  
                <telerik:RadPane ID="RadPane3" runat="server" Height="60px"><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="RadSplitBar2" runat="server" /> 
                <telerik:RadPane ID="RadPane4" runat="server" Scrolling="None"><telerik:RadSplitter ID="RadSplitter1" Runat="server" SplitBarsSize="" 
                     Height="100%" Skin="Outlook" Width="100%">  
                    <telerik:RadPane ID="RadPane1"   
                            Runat="server" Scrolling="None" Height="50%"><div style="height: 100%; width: 100%; overflow: hidden; background-color: #00FFFF;">  
                            <telerik:RadToolBar ID="RadToolBar1" runat="server" Height="20px"   
                                onclientbuttonclicked="TBClick" Width="100%">  
                                <CollapseAnimation Duration="200" Type="OutQuint" /> 
                                <Items> 
                                    <telerik:RadToolBarButton runat="server" Text="Button 0">  
                                    </telerik:RadToolBarButton> 
                                    <telerik:RadToolBarButton runat="server" Text="Button 1">  
                                    </telerik:RadToolBarButton> 
                                    <telerik:RadToolBarButton runat="server" Text="Button 2">  
                                    </telerik:RadToolBarButton> 
                                    <telerik:RadToolBarDropDown runat="server" Text="Window">  
                                        <Buttons> 
                                            <telerik:RadToolBarButton runat="server" Text="Close All">  
                                            </telerik:RadToolBarButton> 
                                            <telerik:RadToolBarButton runat="server" Text="Restore All">  
                                            </telerik:RadToolBarButton> 
                                            <telerik:RadToolBarButton runat="server" Text="Tile">  
                                            </telerik:RadToolBarButton> 
                                            <telerik:RadToolBarButton runat="server" Text="Cascade">  
                                            </telerik:RadToolBarButton> 
                                            <telerik:RadToolBarButton runat="server" Text="Minimise All">  
                                            </telerik:RadToolBarButton> 
                                        </Buttons> 
                                    </telerik:RadToolBarDropDown> 
                                </Items> 
                            </telerik:RadToolBar> 
                            <telerik:RadAjaxPanel ID="RadAjaxPanel3"   
                                runat="server" BackColor="#0099FF" BorderColor="#3399FF">something</telerik:RadAjaxPanel></div></telerik:RadPane><telerik:RadSplitBar ID="RadSplitBar1" Runat="server" /><telerik:RadPane ID="RadPane2" Runat="server" Height="50%" Width="30px"   
                            Scrolling="None"><telerik:RadSlidingZone ID="RadSlidingZone1"   
                    Runat="server" ClickToOpen="True"   
                        SlideDirection="Left" Width="22px" Height="70%"><telerik:RadSlidingPane   
                    ID="RadSlidingPane1" Runat="server"   
                            EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" Index="0"   
                            Scrolling="None" Skin="" Title="Linked" Width="240px"   
                    EnableResize="False"><telerik:RadToolBar ID="RadToolBar2" runat="server" Skin="Outlook"   
                                    onclientbuttonclicked="TBClick" Width="100%" Height="30px" ><CollapseAnimation Duration="200" Type="OutQuint" /><Items><telerik:RadToolBarButton runat="server" Text="Close All"></telerik:RadToolBarButton><telerik:RadToolBarButton runat="server" Text="Tile"></telerik:RadToolBarButton><telerik:RadToolBarButton runat="server" Text="Cascade"></telerik:RadToolBarButton><telerik:RadToolBarButton runat="server" Text="Restore All"></telerik:RadToolBarButton></Items></telerik:RadToolBar><asp:Panel   
                    ID="Panel1" runat="server" Height="100%" ScrollBars="Vertical"   
                                Width="100%"></asp:Panel></telerik:RadSlidingPane><telerik:RadSlidingPane   
                    ID="RadSlidingPane2" Runat="server"   
                            EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" Index="0"   
                            Scrolling="Y" Skin="" Title="Similiar" Width="250px"   
                    EnableResize="False"><telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" height="200px"   
                                width="200px"></telerik:RadAjaxPanel></telerik:RadSlidingPane></telerik:RadSlidingZone></telerik:RadPane></telerik:RadSplitter></telerik:RadPane> 
            </telerik:RadSplitter> 
              
              
          
        </div> 
        </form> 
    </body> 
    </html> 
     
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 07 May 2009 Link to this post

    Hi Jordan,

    I see from your code that you are aware that in order to correctly configure the splitter in percentages you should set all its parent elements heights explicitly - that is why you have set the html, body and form elements heights to 100%. However, you have nested the splitter in a DIV element and you have forgotten to set its height, too. This being said, in order to get the desired result you should set the DIV's height as shown below:

       <telerik:RadScriptManager ID="RadScriptManager1" runat="server">     
            <Scripts>    
                <asp:ScriptReference Path="~/helper.js" />    
            </Scripts>    
        </telerik:RadScriptManager>    
        <div style="height: 100%">    
            <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal"      
                Height="100%" Width="100%">      
                <telerik:RadPane ID="RadPane3" runat="server" Height="60px"><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>    
                </telerik:RadPane>    
                <telerik:RadSplitBar ID="RadSplitBar2" runat="server" />   

    For your convenience I prepared and attached a demo page based on your code.

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