Jquery ui resize a floating element.

Question

When you float an element to the right, use the jQuery UI resizable widget to make it resizable from the left edge, strange things happen.

I put this together:

http://jsfiddle.net/nicholasstephan/kCduV/2/

If you resize the "sidebar", you will immediately see what I'm talking about.

What am I doing wrong here?

I would rather keep the float: so that the left column takes care of itself.

Answer 1

Working demo: http://jsfiddle.net/kCduV/10/ and another solution: http://jsfiddle.net/kCduV/12/

JQuery Code:

$(function() { // $('.resizable').resizable({'handles': 'w'}); $('.resizable').resizable({ handles: 'e,w', resize: function (event,ui) { ui.position.left = ui.originalPosition.left; ui.size.width = (ui.size.width - ui.originalSize.width )*2 + ui.originalSize.width; } }); }); 

OR

 $(function() { // $('.resizable').resizable({'handles': 'w'}); $('.resizable').resizable({ handles:'e,w', resize: function (event,ui) { ui.position.left = ui.originalPosition.left; ui.size.width += (ui.size.width - ui.originalSize.width); } }); }); 

Explanation: jQuery Resizable: doubling the resize width