I'm using nested RadSplitters and RadPanes to create a 3 pane layout that fills the browser window. The problem occurs in IE9 when "Compatibility View" is turned on: RadTextBox elements do not scroll with the other content in the pane, but instead remain fixed in the browser window (as if they had a position of "fixed"). Here is a page that demonstrates the problem:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="RadControlsWebApp1.WebForm2" %><!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"> <title></title> <style type="text/css"> html, body, form { height: 100%; margin: 0px; padding: 0px; overflow: hidden; } </style></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"> </asp:ScriptReference> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"> </asp:ScriptReference> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"> </asp:ScriptReference> </Scripts> </telerik:RadScriptManager> <div id="ParentDivElement" style="height: 100%;"> <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" Orientation="Horizontal" PanesBorderSize="0" BorderSize="0"> <telerik:RadPane ID="TopPane" runat="server" Height="88" Scrolling="none" CssClass="topPane" BorderStyle="None"> <h1>Top Menu Goes Here</h1> </telerik:RadPane> <telerik:RadSplitBar ID="HorizontalSplitterBar" runat="server" CollapseMode="None"></telerik:RadSplitBar> <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500"> <telerik:RadSplitter ID="NestedSplitter" runat="server" LiveResize="true" BorderStyle="None" CssClass="showTopBorder"> <telerik:RadPane ID="LeftPane" runat="server" Width="300"> <p>Side menu goes here</p> </telerik:RadPane> <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="None" /> <telerik:RadPane ID="ContentPane" runat="server" CssClass="valignPane"> <asp:Panel ID="Panel1" runat="server"> <div> This is a RadTextBox: <telerik:RadTextBox ID="RadTextBox1" runat="server"></telerik:RadTextBox> </div> <div style="height:1200px"> This div is here to force the pane to have a scroll bar. </div> </asp:Panel> </telerik:RadPane> </telerik:RadSplitter> </telerik:RadPane> </telerik:RadSplitter> </div> </form></body></html>1 Answer, 1 is accepted
0
Jonah
Top achievements
Rank 1
Rank 1
answered on 21 Mar 2012, 09:44 PM
OK, I solved it. It turns out this is an IE7 bug (which also affects IE8 and IE9 if the "Compatibility View" setting is turned on) where elements with "position: relative" don't scroll correctly within an unpositioned element. The workaround in this case was to create a CSS class with "position: relative" and set the parent RadPane's CssClass to this class. After doing that, scrolling works as expected.