Question

I have 3 columns that are resizable. When one is made wider, the one to it’s left is made smaller. Essentially there are only 2 handles. Left col and Mid col. So when Mid col is made thinner, Right col expands accordingly. All three of them are contained with a 900px parent div, so the sum of all three is always 900. They have max and min widths set statically.

My issue is that if you take the left handle and move it all the way to the right you’re still able to use the right handle and expand the mid col past the edge of the parent div.

I thought of a way to solve that issue by writing up a function that checks the widths of the columns and then subtracts left and right columns from the parent div width, I called it mWid. This leaves me with the number I want to set as the maxWidth for Mid col.

Now the issue is that mWid is not gettings updated for here “maxWidth: mWid”

Here is what the function for the right handle looks like:

$(function() {
    $("#midResizable").resizable({
        handles: 'e',
        containment: '#container',
        maxWidth: mWid, // gets set once, but doesn't update! WHY?
        minWidth: 195,
        resize: function(event, ui) {
            contWidth = $('#container').width()
            newWidth = $(this).width()
            leftWidth = $('#leftResizable').width()
            rightWidth = $('#rightResizable').width()
            $("#rightResizable").css("width", (contWidth-15)-(newWidth)-(leftWidth)+"px");
            checkWid()
        }
    });     
});     

function checkWid() {
    rightWidth = $('#rightResizable').width()
    leftWidth = $('#leftResizable').width()
    contWidth = $('#container').width()
    mWid = (contWidth-15)-(rightWidth)-(leftWidth)
}

Answer 1

Check this out: http://jqueryui.com/demos/resizable/#option-maxWidth

Looks like maxWidth: mWid, only gets called on init.

The maxWidth needs to be explicitly set after that, like this:

$( "#midResizable" ).resizable( "option", "maxWidth", mWid );