Question

I’m using jquery UI to resize a div vertically(I.E. using the n handle). I’m using a helper so it only resizes after the user stops dragging. After a resize is done I call a function which sets dimensions on surrounding elements so they all fit within a container.

This works in both chrome and IE, but in firefox a css property of top is added which blows the div out of the container.

I’ve tried removing the top value after the fact, which works, but this is kind of a hack and also causes the div to ‘jump’.

Is this a bug? Is there a workaround using jquery css html, etc?

To see what I mean check this fiddle and resize the element, if you inspect it in firefox there will a top css property but not in chrome.

Thanks,
Luke

Answer 1

In my opinion it is a bug.

Workaround: if you add a top: 0; to the css rule for #resizable IE, chrome and firefox have the same behavior. Also see the updated example.

=== UPDATE ===

It’s a firefox bug. I walked from the jQuery UI resizable method code until the css method of jQuery (main) code to find an answer. At the end of my search I could found that firefox returns for css top value auto for not/static positioned elements, but returns 0px if relative position is set; in both cases top is not defined (they could be set to auto with no difference – it’s the default value).

Also see this example.

In the resizable method this result makes the difference (jQuery UI sets the relative position to the DOM element by adding a class). If the bug (which I have reported to mozilla) will be fixed, the behavior of your example in the firefox should be the same as in chrome.

I’ll report here if there is something new…

=== UPDATE ===

Now I have a workaround for you:

for the special situation you described set the css position of your resizable element manually to static.

Add to your stylesheets:

#resizable { position: static; }

Also see your updated example.