weird bug with jquery ui resizable

StackOverflow https://stackoverflow.com/questions/17820381

Question

I'm playing around with jquery UI and I noticed a weird bug. When i click a button which makes a div resizable, the div moves to a position below that 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 as soon as i click the make resizable button, the div becomes resizable but it also moves vertically below the button.

The weird part is this: IF i remove the css from my.css and place 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 change the declaration of the 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 DOES NOT OCCUR.

But of course doing that is both undesirable and stupid. The issue cannot be reproduced in jsfiddle because obviously all css is inline. I can upload the files online in both versions if its necessary.

jquery versions:

jQuery UI - v1.8.20 - 2012-04-30

jQuery v1.7.2 jquery.com | jquery.org/license

Thanks in advance for any input.

EDIT: just tested it with jquery-ui 1.30.3 and jquery 1.9.1 ( latest ). the issue persists, so it's not due to an old version of it.

EDIT2: I've uploaded the files here http://speedy.sh/eBPea/resizable.zip

resizable.htm: demonstrates the problem

resizable2.htm: the problem does not appear if I don't use CSS classes ( not an option )

resizable3.htm: the problem does not appear if I include CSS classes in the html file ( not an option )

Was it helpful?

Solution

It seems to be a problem with the CSS.

The resizable plugin add the class ui-resizable to your element and it comes with this style by default in jQuery UI:

.ui-resizable {
    position: relative;
}

This causes problems as your CSS has the position: absolute and is overridden. To prevent this issue add this rule to your CSS file:

.MyDiv.ui-resizable {
    position: absolute;
}

or make change the .MyDiv definition as:

.MyDiv {
    position: absolute !important;
}

OTHER TIPS

I had the same problem. None of the answers worked for me.

My div's width started at 200px and when I moved the mouse to resize from the east, the width immediately went down to 170px. I traced the problem to lines 302 and 303 in resizable.js an changed el.width() to el.outerWidth()

Lines:

this.size = this._helper ? { width: this.helper.width(), height: this.helper.height() } : { width: el.outerWidth(), height: el.height() };
this.originalSize = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.outerWidth(), height: el.height() };

It should work as you can see in this jsfiddle:

HTML 

<button id="resizeBtn">Make Resizable</button>
<div id="divRes" class="MyDiv"></div>

JS

$('#resizeBtn').click(function() {    
    $("#divRes").resizable();
});

CSS

.MyDiv {
    position: absolute;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    background-color: cyan;
}

http://jsfiddle.net/GfczQ/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top