RadTextBox in RadPane not scrolling correctly in IE9 with Compatibility View turned on

2 posts, 0 answers
  1. Jonah
    Jonah avatar
    4 posts
    Member since:
    Aug 2011

    Posted 20 Mar 2012 Link to this post

    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">
    <head runat="server">
        <style type="text/css">
            html, body, form
                height: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <asp:ScriptReference Assembly="Telerik.Web.UI"
                <asp:ScriptReference Assembly="Telerik.Web.UI"
                <asp:ScriptReference Assembly="Telerik.Web.UI"
        <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: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:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="None" />
                        <telerik:RadPane ID="ContentPane" runat="server" CssClass="valignPane">
                            <asp:Panel ID="Panel1" runat="server">                       
                                This is a RadTextBox: <telerik:RadTextBox ID="RadTextBox1" runat="server"></telerik:RadTextBox>
                            <div style="height:1200px">
                                This div is here to force the pane to have a scroll bar.
  2. Jonah
    Jonah avatar
    4 posts
    Member since:
    Aug 2011

    Posted 21 Mar 2012 Link to this post

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