No auto width after resizing div with Jquery UI Resizable with helper

Question

I have this strange thing with the JQuery Resizable plugin:

Very simplified it comes down to this:

1. I need to resize a div's height with a resize handle only at the bottom (lets call this div div2)
2. After resizing, the div's parent width is changed for some reason (lets call this div div1)
3. Width of div2 adjusts automatically according to its parent div1

Everything works fine. Now the thing is i want to use a helper css class with te resizable plugin just for things to look better. But if i configure the helper, step 3 is not happening anymore? The previously resized div seems to have a forever static width???

In the following jsfiddle the issue can be reproduced: http://jsfiddle.net/g52p9/1/

Steps to reproduce:

1. Resize height of div2 by grabbing the handle on the bottom
2. Click the button to set the width of the parent div (div1) to 100
3. Now repeat steps 1 and 2 with the helper line uncommented ans see the difference....

Can anybody explain me why this is happening??

PS. Why does a link to jsfiddle.net must be accompanied by code?

Answer 1

Ok i figured it out. so here's the answer to my own question:

I initialize the resizable elements like this:

 $(".resizable").resizable({
            grid: 50,   
            handles: ' s',
            helper: "ui-resizable-helper"
  });

When the handles option is set to 's' (south), we can only resize the element vertically, so only the height changes. For some reason, without setting the helper option, the width attribute of the element remains unchanged, but when setting the helper (or animate) option, the width attribute gets set to the current width.