border-box and dialog resizing problem

[mcanepa]

Having this CSS:

*
{
    box-sizing: border-box;
}

If you try to resize a dialog, then the inner content (ui-dialog-content) is resized wrongly

See this fiddle: http://jsfiddle.net/QBqff/2/

A workaround is suggested in https://bugs.jqueryui.com/ticket/9137

Using this CSS:

.ui-resizable, .ui-resizable * {
    box-sizing: content-box;
}

but that affects the size of several elements I have inside the dialog

[mcanepa]

apparently there is a pull request that addresses this issue but it was never accepted

https://github.com/jquery/jquery-ui/pull/1451

[fnagel]

Actually #1451 was never a valid PR (due to GIT and CLA issues). There was a follow up, this one: #1563 (which was never merged due to missing tests)

Having tests for that would be very nice, but we have almost no resources to work at jQuery UI at this point. Are you able to write some and create PR? Or at least rebase #1563 and add a new PR, confirming its still working?

[mcanepa]

Until this gets properly fixed, here's a workaround if anyone is looking for the same thing

$(selector).dialog({
    resize: function()
    {
        $(this).closest(".ui-dialog-content").css({
            "width": "100%",
            "height": "100%"
        });
    }
});