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

Splitter and IE8 rendering differences

1 Answer 119 Views

Splitter

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

Rhyss asked on 07 May 2009, 01:36 AM

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=neutral, PublicKeyToken=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=neutral, PublicKeyToken=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>

1 Answer, 1 is accepted

answered on 07 May 2009, 08:25 AM

default2.zip

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.