Experimenting with jquery UI, I came across an unusual bug. After clicking a button to make a div resizable, the div unexpectedly moves below the button.
resizable.html:
<html>
<head>
<link href="my.css" rel="stylesheet" type="text/css"/>
<link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script>
function makeResizable() {
$("#divRes").resizable();
}
</script>
<style>
</style>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br>
<button onclick="makeResizable();">Make Resizable</button>
<div id="divRes" class="MyDiv"></div>
</body>
</html>
my.css:
.MyDiv {
position: absolute;
left: 50px;
top: 50px;
height: 100px;
width: 100px;
padding: 0px;
margin: 0px;
z-index: 1;
background-color: cyan;
}
Upon clicking the make resizable button, the div becomes resizable but shifts vertically beneath it.
The odd part is this: IF I eliminate the CSS in my.css and embed it inline between the
<style>
.MyDiv {
position: absolute;
left: 50px;
top: 50px;
height: 100px;
width: 100px;
padding: 0px;
margin: 0px;
z-index: 1;
background-color: cyan;
}
</style>
OR if I modify the div declaration from:
<div id="divRes" class="MyDiv"></div>
to
<div id="divRes"></div>
and my.css to
#divRes {
position: absolute;
left: 50px;
top: 50px;
height: 100px;
width: 100px;
padding: 0px;
margin: 0px;
z-index: 1;
background-color: cyan;
}
THE ISSUE DOES NOT OCCUR.
However, resorting to either of these solutions is both undesirable and illogical. The problem cannot be replicated in jsfiddle because all CSS is inline. I can provide online links to the files in both formats if needed.
jquery versions:
jQuery UI - v1.8.20 - 2012-04-30
jQuery v1.7.2 jquery.com | jquery.org/license
Thank you for any assistance.
EDIT: testing with jquery-ui 1.30.3 and jquery 1.9.1 ( latest ) still shows the issue, ruling out version problems.
EDIT2: Files uploaded here
resizable.htm: displays the problem
resizable2.htm: no issue when not using CSS classes (not preferred)
resizable3.htm: no problem when including CSS classes within the HTML file (not preferred)