<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
.box
{
background-color:Gray;
width:300px;
height:400px;
position:relative;
padding-top : 50px;
padding-bottom : 50px;
padding-left : 50px;
padding-right : 50px;
}
fieldset
{
border-color : Red;
width : 50% !important;
padding-top : 50px;
padding-bottom : 50px;
padding-left : 50px;
padding-right : 50px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#resizable").resizable();
});
</script>
</head>
<body>
<fieldset id="fdemo">
<div id="resizable" style="width: 100px; height: 100px;" class='box'></div>
</fieldset>
</body>
</html>
Attached above is the html code with a fieldset and a resizable div within the fieldset.
My user can resize the div to any width he wishes. In my real application I have other elements that resize. So this is just a relating demo.
In case my user resizes a control (in this case the div within the fieldset) to a width greater than the width of the fieldset, the width of the fieldset should increase so that the div is contained within the bounds of the fieldset.
When you execute the above code and put IE8 or IE9 in quirks mode, you will notice that the desired behaviour is achieved, the fieldset's width increases and the div is contained within the fieldset.
However when the document goes into standard mode(i.e. IE8 standard mode or IE9 standard mode), resizing of the div does not resize the fieldset. The fieldset stays as it is and the div moves over and out of the fieldset.
I am unable to understand why this is occuring and am not aware of availablity or unavailability of any property that could cause this issue to occur.
I need a solution that would allow the above to work on IE7, IE8 and IE9.
Any help would be appreciated.
Thanks in Advance.
Submit an article or tip