html - weird bug with jquery ui resizable -
i'm playing around jquery ui , noticed weird bug. when click button makes div resizable, div moves position below 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; } so click make resizable button, div becomes resizable moves vertically below button.
the weird part this: if remove css my.css , place inline between
<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 change declaration of div 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 not occur.
but of course doing both undesirable , stupid. issue cannot reproduced in jsfiddle because css inline. can upload files online in both versions if necessary.
jquery versions:
jquery ui - v1.8.20 - 2012-04-30
jquery v1.7.2 jquery.com | jquery.org/license
thanks in advance input.
edit: tested jquery-ui 1.30.3 , jquery 1.9.1 ( latest ). issue persists, it's not due old version of it.
edit2: i've uploaded files here http://speedy.sh/ebpea/resizable.zip
resizable.htm: demonstrates problem
resizable2.htm: problem not appear if don't use css classes ( not option )
resizable3.htm: problem not appear if include css classes in html file ( not option )
it seems problem css.
the resizable plugin add class ui-resizable element , comes style default in jquery ui:
.ui-resizable { position: relative; } this causes problems css has position: absolute , overridden. prevent issue add rule css file:
.mydiv.ui-resizable { position: absolute; } or make change .mydiv definition as:
.mydiv { position: absolute !important; }
Comments
Post a Comment