Dialog: Content grows bigger than widget on resize at document edge

How to create the problem:

1. Open http://jqueryui.com/demos/dialog/#default

2. Drag the window to the left edge of your screen.

3. Drag the dialog to the right edge of the document.

4. Grab the resize handle of the dialog.

5. Drag it to the right edge of your screen.

6. Release the mouse button at the right edge of your screen.

Other browsers:

I got the same behavior in

• Chrome 4.1.249.1064
• Opera 10.53
• Safari 3.2.2(525.28.1)
• Firefox 3.5.9

it works fine in

• IE 8.0.6001.18904
• IE 6.0.2900.5512_xpsp_sp3_gdr.100216-1514

I think In IE it seems to work fine because IE raises the mouse move event only when the mouse cursor is in the browser.

Test Code:

$(document).mousemove(function () {
	document.title = parseInt(document.title)+1 || 0;
});

The problem may be in ui.resizable.

See:

jQuery UI 1.8.1 uncompressed version.

jquery.ui.dialog.js

line 410(dialog _makeResizable)

self.uiDialog.resizable({
	cancel: '.ui-dialog-content',
	containment: 'document',
	alsoResize: self.element,
...

"self.element" means the dialog content.

"self.uiDialog" means the wrapper of the content.

jquery.ui.resizable.js

line 300(resizable _mouseDrag)

this._propagate("resize", event);

line 501(resizable _propagate)

$.ui.plugin.call(this, n, [event, this.ui()]);

There are some plugins having "resize" member.

1. line 552(resizable alsoResize resize)

2. line 676(resizable containment resize)

3. line 748(resizable ghost resize)

4. line 760(resizable grid resize)

line 576(resizable alsoResize resize _alsoResize)

el.css(style);

plugin "alsoResize" resizes el(=the dialog content).

line 706(resizable containment resize)

if (woset + self.size.width >= self.parentData.width) {

plugin "containment" respects the size of the "containment" element(=document).

line 302(resizable _mouseDrag)

el.css({
	top: this.position.top + "px", left: this.position.left + "px",
	width: this.size.width + "px", height: this.size.height + "px"
});

"el" means the wrapper of the dialog content.

Problem:

The size of the "alsoResize" element(=dialog content) does not respect the size of "containment" element(=document).

Workaround:

I don't know.

"Adding plugin 'containment' first" may work.

See #4603.

#6810 is a duplicate of this ticket.

#6816 is a duplicate of this ticket.

If you don't want edit source there is workaround for 1.8.7

var plg = $.ui['resizable'].prototype.plugins;
// 0 - AlsoResize, 1 - Containment 
var temp;
temp = plg['start'][0];
plg['start'][0] = plg['start'][1];
plg['start'][1] = temp;

temp = plg['resize'][0];
plg['resize'][0] = plg['resize'][1];
plg['resize'][1] = temp;
// 0 - AlsoResize, 2 - Containment 
temp = plg['stop'][0];
plg['stop'][0] = plg['stop'][2];
plg['stop'][2] = temp;

#8502 is a duplicate of this ticket.

The current behavior of this bug on the demo page (http://jqueryui.com/demos/dialog/#default) is that the content (.ui-dialog-content) grows by 1px in comparison to the entire dialog (.ui-dialog) per every resize of that axis. 3 separate horizontal resize operations means the content is now 3px wider than it should be.

I have also observed that the content may shrink on resize (by a much greater factor of 1px). I have seen a dialog box's content shrink by 12px (corresponds to 1em on the stylesheet) per every resizestart event. Unfortunately, I haven't had the time to provide a reduced test case to figure out what causes the discrepancy in offset and magnitude.

Possibly an erroneous relative margin / padding calculation?

I just submitted ticket #8506 and a pull request for it as well. The issues might be related.

Resizable: Respect containment for alsoResize option. Fixes #4603 - Resizable: alsoResize option doesn't work with containment. Fixes #5559 - Dialog: Content grows bigger than widget on resize at document edge.

Changeset: 5ba267e7c78f0bc257383c822d241c5369e8e49d

#8921 is a duplicate of this ticket.