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:
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
0
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:
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.
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.