#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:
How to create the problem:
- Open http://jqueryui.com/demos/dialog/#default
- Drag the dialog to the left edge of the screen.
- Grab the resize handle and drag it to the right edge of your screen.
- 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 Changed 13 years ago by
comment:2 Changed 13 years ago by
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.
- line 552(resizable alsoResize resize)
- line 676(resizable containment resize)
- line 748(resizable ghost resize)
- 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:6 Changed 11 years ago by
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;
comment:8 Changed 11 years ago by
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?
comment:9 Changed 11 years ago by
I just submitted ticket #8506 and a pull request for it as well. The issues might be related.
comment:10 Changed 11 years ago by
Milestone: | TBD → 1.10.0 |
---|
comment:11 Changed 11 years ago by
Status: | new → open |
---|---|
Summary: | Dialog content grows bigger then widget on resize at document edge → Dialog: Content grows bigger then widget on resize at document edge |
comment:12 Changed 10 years ago by
Summary: | Dialog: Content grows bigger then widget on resize at document edge → Dialog: Content grows bigger than widget on resize at document edge |
---|
comment:13 Changed 10 years ago by
Resolution: | → fixed |
---|---|
Status: | open → closed |
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
How to create the problem:
Other browsers:
I got the same behavior in
it works fine in