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

Rad Textbox IE 7 Compatibility View Issue

4 Answers 105 Views

Input

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

mosswgreentea asked on 14 Mar 2012, 10:49 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

</form>

</body>

</html>

4 Answers, 1 is accepted

answered on 19 Mar 2012, 04:27 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />