Rad Textbox IE 7 Compatibility View Issue

5 posts, 0 answers
  1. mosswgreentea
    mosswgreentea avatar
    10 posts
    Member since:
    Dec 2009

    Posted 14 Mar 2012 Link to this post

    We are having a form section with a vertical scroll. We have placed a Rad Textbox at the top. We have noticed that when IE renders in IE 7.0 compatibility mode (default mode for Intranet sites), the textbox stays fixed when user scrolls.

    I've pasted the sample code below:
    <%@ 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 id="Head1" runat="server">
        <title></title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
        <style type="text/css">
            body
            {
                font-family: Arial, Helvetica, Sans-Serif;
                font-size: 11pt;
                color: Black;
            }
              
            div.MasterContainer
            {
                width: 600px;
                height: 400px;
                padding: 0px;
                margin: auto;
            }
              
            div.FormContainer
            {
                width: 95%;
                margin: 0px;
                padding: 0px;
                border-style: solid;
                border-width: 1px;
                border-color: Black;
                border-collapse: collapse;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.        
        </script>
        <div class="MasterContainer">
            <div style="width: 100%; height: 150px; overflow: auto;">
                <div class="FormContainer">
                    <telerik:RadTextBox ID="txtTab2Title" runat="server" EmptyMessage="Enter Something Here"
                        Label="Enter:" Width="250px">
                    </telerik:RadTextBox>
                </div>
                <div style="width: 95%; margin-top: 10px;">
                    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                    egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
                    ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
                    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
                    Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
                    fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
                    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
                    dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
                    eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
                    facilisis luctus, metus
                </div>
            </div>
        </div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        </form>
    </body>
    </html>

  3. Vasil
    Admin
    Vasil avatar
    1641 posts

    Posted 15 Mar 2012 Link to this post

    Hello mosswgreentea,

    Try to set position:relative to the FormContainer div.

    All the best,
    Vasil
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. mosswgreentea
    mosswgreentea avatar
    10 posts
    Member since:
    Dec 2009

    Posted 19 Mar 2012 Link to this post

    Hi,

    I tried your suggestion and modified the CSS class and still see the issue in IE 7 compatibility view. The textbox works properly in IE 8.0 standards.

    I've attached the updated markup below:

    <%@ 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 id="Head1" runat="server">
        <title></title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
        <style type="text/css">
            body
            {
                font-family: Arial, Helvetica, Sans-Serif;
                font-size: 11pt;
                color: Black;
            }
             
            div.MasterContainer
            {
                width: 600px;
                height: 400px;
                padding: 0px;
                margin: auto;
                margin-top: 40px;
            }
             
            div.FormContainer
            {
                width: 95%;
                margin: 0px;
                padding: 0px;
                border-style: none;
                border-width: 0px;
                border-color: Black;
                border-collapse: collapse;
                position: relative;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.       
        </script>
        <div class="MasterContainer">
            <div style="width: 100%; height: 150px; overflow: auto;">
                <telerik:RadTextBox ID="txtTab2Title" runat="server" EmptyMessage="Enter Something Here"
                    Label="Enter:" Width="250px" /><br />
                <div style="width: 95%; margin-top: 10px;">
                    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                    egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
                    ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
                    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
                    Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
                    fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
                    lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
                    dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
                    eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
                    facilisis luctus, metus Pellentesque habitant morbi tristique senectus et netus
                    et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies
                    eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
                    ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien
                    ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare
                    sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum
                    orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
                    Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue,
                    eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis,
                    accumsan porttitor, facilisis luctus, metus
                </div>
            </div>
        </div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        </form>
    </body>
    </html>

  7. Eyup
    Admin
    Eyup avatar
    3986 posts

    Posted 20 Mar 2012 Link to this post

    Hi Arvind,

    I guess you have found the well known position: relative bug in IE6/7. To fix it, you need to add position: relative to any scrollable container in which these arrows are located.
     
    In your case just add it here:

    <div class="MasterContainer">
      <div style="width: 100%; height: 150px; overflow:auto;position:relative"> 
    <div class="FormContainer">

    I have tried it and it fixed the problem.

    All the best,

    Eyup
    the Telerik team

     

    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. mosswgreentea
    mosswgreentea avatar
    10 posts
    Member since:
    Dec 2009

    Posted 20 Mar 2012 Link to this post

    Hi,

    That fixed the problem!

    Thanks.
Back to Top