jquery ui - when resizing a floating div horizontally, the height is also modified

Question

I have a bit of code where clicking on a grid creates a DIV, with position absolute, a fixed height of 8px, and a bottom, left and width set. I use jquery UI to implement dragging and resizing (I have included the CSS file and the jquery-ui js file.

I have set resize handles to "w, e" so it can only be resized horizontally. That works fine, but the bottom and height are changed, because after three times resizing the div is as small as 2px. It seems to lose 2px per 'resize session'.

I used http://jqueryui.com/demos/resizable/ as example, where it works fine. So what is going wrong here?

some code (simplified):

var left = 200;
var width = 120;
var invertedRowIndex = 8; // calculated in real code
var ROW_HEIGHT = 17;
var jqo = $("div.grid");
var bottom = (invertedRowIndex * ROW_HEIGHT) + "px";
var html = "<div class=\"mybar\" id=\"bar1\" style=\"left: " + left + "px; bottom: " + bottom + "; width: " + width + "px\"><!-- fill --></div>";
jqo.append(html);
var jq = $("div#bar1").addClass("cursor-pointer");
jq.resizable({
        handles: "w, e",
        grid: [10, 10],
        minHeight: 8,
        maxHeight: 8,
        minWidth: 10
    });

Answer 1

I solved this the way Andy mentioned in a comment:

"you could try to reset the height of the element inside the stop event of resizable"