Home › jQuery UI dialog example: relative position inside dialog messes up scrolling in IE7

jQuery UI dialog example: relative position inside dialog messes up scrolling in IE7 

James
Joined:
02/21/2009
Posts:
130

June 22, 2010 18:46:31    Last update: January 11, 2011 20:24:42
This is the page:
  • Code
  • Demo
<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI Dialog</title>

	<link rel="stylesheet" type="text/css" media="all"
		href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-darkness/jquery-ui.css"/>

	<style type="text/css">
	#dialog .input {
		margin: 0 10px 10px 0;
		width: 185px;
		position: relative;
	}
	</style>

	<script type="text/javascript" 
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
	</script>

	<script type="text/javascript" 
		src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js">
	</script>

	<script type="text/javascript">
	$(function() {
		$("#dialog").dialog({
			autoOpen: true,
			height: 200,
			width: 300
		});
	});
	</script>
</head>

<body>
<div id="dialog" title="Dialog with Scroll Test">
	<div class="input">
		<label for="field1">Field 1</label>
		<input name="field1" type="text">
	</div>

	<div class="input">
		<label for="field2">Field 2</label>
		<input name="field2" type="text">
	</div>

	<div class="input">
		<label for="field3">Field 3</label>
		<input name="field3" type="text">
	</div>

	<div class="input">
		<label for="field4">Field 4</label>
		<input name="field4" type="text">
	</div>

	<div class="input">
		<label for="field5">Field 5</label>
		<input name="field5" type="text">
	</div>

	<div class="input">
		<label for="field6">Field 6</label>
		<input name="field6" type="text">
	</div>
</div>
</body>
</html>


It renders like this in IE 7:


However, when you try to scroll to the bottom of the dialog, IE takes long time to respond, the it messes up the title bar:


Everything works fine if you take away the relative position in CSS: 
<style type="text/css">
	#dialog .input {
		margin: 0 10px 10px 0;
		width: 185px;
		/* position: relative; */
	}
</style>
Share |
| Comment  | Tags
 

Related Notes