jQuery UI Resizable scaling by only 50% of drag

Question

So my goal here is to let users set the width of their page, in the end there will be a lot of data in here and there's no need for wasted resolution.

Anyways, the mechanism for re-sizing the box only half works. Literally, only scales to half the size it should be. For example, the minimum width on the real page is set to 900px, the width of my screen is 1920, and when I grab it at 900 and drag to the corner of my screen, I get ~1410px.

I have been able to reproduce this in this jsfiddle: http://jsfiddle.net/FY23J/

The right-most edge of the main body is the grip. If you grab it and move it, you'll see that the expands only half way between the mouse and the original edge. I checked with the jQuery UI documentation, and this is not the intended behavior, as you can see here: http://jqueryui.com/demos/resizable/#default

Is this a something I've caused due to the way my CSS is set up? Does anyone know how to work around it?

Answer 1

I think the resizing works fine. Dragging the mouse for 20px enlarges the dialog by 20px.

The problem is that you centered the dialog so it grows on both ends by half of the dragging distance.

Answer 2

And here's the solution. Multiplication by 2. There's not much documentation on what I'm doing here, so please let me know, anyone, if it's not right. Demo: http://jsfiddle.net/FY23J/3/

$( "#wrapper" ).resizable({
    handles: 'e',
    alsoResize: "#nav",
    minWidth: 900,
    maxWidth: $(window).width()-25,
    stop: function(event,ui){
        console.log(ui.size.width);
    },
    resize: function(event, ui) {
        var self = $(this).data("resizable"),
            o = self.options,
            cs = self.size,
            os = self.originalSize;

        var newWidth = os.width + (Math.round((cs.width - os.width)*2));
        newWidth = newWidth <= o.minWidth ? o.minWidth : newWidth;
        newWidth = newWidth >= o.maxWidth ? o.maxWidth : newWidth;
        console.log(newWidth);
        self.size.width = newWidth;
    }
});