Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#12307 closed defect (wontfix)

IE7 ValidationTextBox in div with scroll bar

Reported by: JRI Owned by: Douglas Hays
Priority: high Milestone: tbd
Component: Dijit - Form Version: 1.5
Keywords: ValidationTextBox dijitInputContainer overflow Cc:
Blocked By: Blocking:

Description

Using dijit.form.ValidationTextBox? on a div with a scroll bar will display all text input with a fixed position on IE 7 (7.0.5730.13) and IE 6

http://img829.imageshack.us/img829/4939/bugdojo.jpg

Example : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
	<SCRIPT type="text/javascript" src="dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true"></SCRIPT>
	<LINK rel="stylesheet" href="dijit/themes/tundra/tundra.css" type="text/css">

	<style>
	/* overwrite .dijitInputContainer position:relative in dijit/themes/dijit.css */
	/*.dijitInputContainer { position:static; }*/
	</style>
</head>

<BODY class="tundra">
	<script type="text/javascript">
	   dojo.require("dijit.form.ValidationTextBox");
	   dojo.require("dojo.parser");
	</script>
	<br><br><br><br><br>
	<form action="#" method="GET">
		<div style="overflow: auto; width: 350px; height: 200px;">
			<table>
				<TR><TD><input type="text" dojoType="dijit.form.ValidationTextBox" value="100,00" id="_1"></TD></TR>
				<TR><TD><input type="text" dojoType="dijit.form.ValidationTextBox" value="100,00" id="_2"></TD></TR>
				<TR><TD><input type="text" dojoType="dijit.form.ValidationTextBox" value="100,00" id="_3"></TD></TR>
				<TR><TD><input type="text" dojoType="dijit.form.ValidationTextBox" value="100,00" id="_4"></TD></TR>
				<TR><TD><input type="text" dojoType="dijit.form.ValidationTextBox" value="100,00" id="_5"></TD></TR>
				<TR><TD><input type="text" dojoType="dijit.form.ValidationTextBox" value="100,00" id="_6"></TD></TR>
				<TR><TD><input type="text" dojoType="dijit.form.ValidationTextBox" value="100,00" id="_7"></TD></TR>
				<TR><TD><input type="text" dojoType="dijit.form.ValidationTextBox" value="100,00" id="_8"></TD></TR>
				<TR><TD><input type="text" dojoType="dijit.form.ValidationTextBox" value="100,00" id="_9"></TD></TR>
				<TR><TD><input type="text" dojoType="dijit.form.ValidationTextBox" value="100,00" id="_10"></TD></TR>
				<TR><TD><input type="text" dojoType="dijit.form.ValidationTextBox" value="100,00" id="_11"></TD></TR>
				<TR><TD><input type="text" dojoType="dijit.form.ValidationTextBox" value="100,00" id="_12"></TD></TR>
				<TR><TD><input type="text" dojoType="dijit.form.ValidationTextBox" value="100,00" id="_13"></TD></TR>
				<TR><TD><input type="text" dojoType="dijit.form.ValidationTextBox" value="100,00" id="_14"></TD></TR>
				<TR><TD><input type="text" dojoType="dijit.form.ValidationTextBox" value="100,00" id="_15"></TD></TR>
			</table>
		</div>
	</form>
</BODY>
</html>

I found 2 way to avoid this :

  • Remove or overwrite the style "position:relative;" style on .dijitInputContainer in dijit/themes/dijit.css.
  • Remove DOCTYPE on top off the page (which mean quirk mode...)

Change History (4)

comment:1 Changed 9 years ago by bill

Owner: set to Douglas Hays

comment:2 Changed 9 years ago by bill

I'm guessing that position:relative is there for the placeHolder support.

comment:3 Changed 9 years ago by Douglas Hays

Resolution: → wontfix
Status: new → closed

Just add position:relative to your scrollable DIV

comment:4 Changed 9 years ago by bill

Component: Dijit → Dijit - Form
Note: See TracTickets for help on using tickets.