Opened 9 years ago

Closed 7 years ago

Last modified 7 years ago

#5559 closed bug (fixed)

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

Reported by: sjonne Owned by:
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.8
Keywords: Dialog content resize overgrowth Cc:
Blocked by: Blocking:

Description

Problem:
When resizing the dialog beyond to right or bottom edge of the document, the dialog stops growing (as expected), but the content "div" does not.

Screenshot from Firebug in FF, with the content div selected: http://img704.imageshack.us/img704/9463/dialoguierror.png

How to create the problem:

  1. Open http://jqueryui.com/demos/dialog/#default
  2. Drag the dialog to the left edge of the screen.
  3. Grab the resize handle and drag it to the right edge of your screen.
  4. Repeat step 3. 5-10 times, and the text begins to disappear to the right.

Other browsers:
I got the same behavior in chrome. In IE7 it works fine when the browser was not maximized.

Change History (14)

comment:1 in reply to:  description Changed 9 years ago by watanabe

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

comment:2 in reply to:  description Changed 9 years ago by watanabe

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.

comment:3 in reply to:  description Changed 9 years ago by watanabe

See #4603.

comment:4 Changed 9 years ago by Scott González

#6810 is a duplicate of this ticket.

comment:5 Changed 9 years ago by Scott González

#6816 is a duplicate of this ticket.

comment:6 Changed 8 years ago by chintsu

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;
Last edited 8 years ago by chintsu (previous) (diff)

comment:7 Changed 7 years ago by Scott González

#8502 is a duplicate of this ticket.

comment:8 Changed 7 years ago by kenaniah

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?

Last edited 7 years ago by kenaniah (previous) (diff)

comment:9 Changed 7 years ago by kenaniah

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

comment:10 Changed 7 years ago by Scott González

Milestone: TBD1.10.0

comment:11 Changed 7 years ago by petersendidit

Status: newopen
Summary: Dialog content grows bigger then widget on resize at document edgeDialog: Content grows bigger then widget on resize at document edge

comment:12 Changed 7 years ago by Scott González

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

comment:13 Changed 7 years ago by Scott González

Resolution: fixed
Status: openclosed

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

comment:10 Changed 7 years ago by Scott González

#8921 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.