Opened 5 years ago

Closed 4 years ago

Last modified 4 years ago

#9521 closed bug (fixed)

Dialog: Resizable dialogs move/resize out of viewpoint boundry

Reported by: zoggy Owned by:
Priority: minor Milestone: 1.10.4
Component: ui.dialog Version: 1.10.0
Keywords: regression Cc:
Blocked by: Blocking:

Description

Windows7 - Firefox 23.0.1 / Chrome 30.0.1599.10 beta-m

In 1.8.24 when I had a dialog pop open and moved around, it respected the viewpoint edges. In 1.10.3 it now pushes slightly past due to the resize handles, which causes the page to show scrollbars.

This can be seen with the basic demo: http://jqueryui.com/dialog/ Take the dialog and move it to the bottom right, you see scrollbars appear. The same thing happens when resizing to the outer edge, you can go past it and make the scrollbars appear.

Try this example with 1.8.24 and you can see what it *should* do.

Change History (13)

comment:1 Changed 5 years ago by tj.vantoll

Status: newopen
Summary: 1.10.3 - Dialog move/resize out of viewpoint boundryDialog: move/resize out of viewpoint boundry
Version: 1.10.31.10.0

The regression occurred in 1.10.

comment:3 Changed 5 years ago by dekajp

It seems that scrollbar appears because of resizable property. i think it's the resizable handles which is might cause issue with containment . Am i heading right ?

http://jsfiddle.net/dekajp/QY6S3/1/

Last edited 5 years ago by dekajp (previous) (diff)

comment:4 in reply to:  3 ; Changed 5 years ago by tj.vantoll

Keywords: regression added
Summary: Dialog: move/resize out of viewpoint boundryDialog: Resiable dialogs move/resize out of viewpoint boundry

Replying to dekajp:

It seems that scrollbar appears because of resizable property. i think it's the resizable handles which is might cause issue with containment . Am i heading right ?

http://jsfiddle.net/dekajp/QY6S3/1/

Yeah you're right, this only affects resizable dialogs. Updated title.

comment:5 in reply to:  4 ; Changed 5 years ago by dekajp

I did try to fix this - here is the updated fiddle link http://jsfiddle.net/dekajp/QY6S3/4/ .

Here is the change set - https://github.com/dekajp/jquery-ui/commit/f70d3f4bd4c540165682b9f478a2f2974abbae95 Let me know if this approach is ok ?

I could not write unit test case - keep getting the " phantomjs must be installed locally " error . I could see in my macos Phantomjs --version . is there a work around ?

Replying to tj.vantoll:

Replying to dekajp:

It seems that scrollbar appears because of resizable property. i think it's the resizable handles which is might cause issue with containment . Am i heading right ?

http://jsfiddle.net/dekajp/QY6S3/1/

Yeah you're right, this only affects resizable dialogs. Updated title.

comment:6 in reply to:  5 ; Changed 5 years ago by tj.vantoll

Replying to dekajp:

I did try to fix this - here is the updated fiddle link http://jsfiddle.net/dekajp/QY6S3/4/ .

Here is the change set - https://github.com/dekajp/jquery-ui/commit/f70d3f4bd4c540165682b9f478a2f2974abbae95 Let me know if this approach is ok ?

I could not write unit test case - keep getting the " phantomjs must be installed locally " error . I could see in my macos Phantomjs --version . is there a work around ?

Replying to tj.vantoll:

Replying to dekajp:

It seems that scrollbar appears because of resizable property. i think it's the resizable handles which is might cause issue with containment . Am i heading right ?

http://jsfiddle.net/dekajp/QY6S3/1/

Yeah you're right, this only affects resizable dialogs. Updated title.

Try npm install then grunt?

comment:7 in reply to:  6 ; Changed 5 years ago by dekajp

Replying to tj.vantoll:

Replying to dekajp:

I did try to fix this - here is the updated fiddle link http://jsfiddle.net/dekajp/QY6S3/4/ .

Here is the change set - https://github.com/dekajp/jquery-ui/commit/f70d3f4bd4c540165682b9f478a2f2974abbae95 Let me know if this approach is ok ?

I could not write unit test case - keep getting the " phantomjs must be installed locally " error . I could see in my macos Phantomjs --version . is there a work around ?

Replying to tj.vantoll:

Replying to dekajp:

It seems that scrollbar appears because of resizable property. i think it's the resizable handles which is might cause issue with containment . Am i heading right ?

http://jsfiddle.net/dekajp/QY6S3/1/

Yeah you're right, this only affects resizable dialogs. Updated title.

Try npm install then grunt?

finally got it working - npm install grunt-contrib-qunit --save-dev - https://github.com/gruntjs/grunt-contrib-qunit

comment:8 in reply to:  7 Changed 5 years ago by dekajp

Replying to dekajp:

Replying to tj.vantoll:

Replying to dekajp:

I did try to fix this - here is the updated fiddle link http://jsfiddle.net/dekajp/QY6S3/4/ .

Here is the change set - https://github.com/dekajp/jquery-ui/commit/f70d3f4bd4c540165682b9f478a2f2974abbae95 Let me know if this approach is ok ?

I could not write unit test case - keep getting the " phantomjs must be installed locally " error . I could see in my macos Phantomjs --version . is there a work around ?

Replying to tj.vantoll:

Replying to dekajp:

It seems that scrollbar appears because of resizable property. i think it's the resizable handles which is might cause issue with containment . Am i heading right ?

http://jsfiddle.net/dekajp/QY6S3/1/

Yeah you're right, this only affects resizable dialogs. Updated title.

Try npm install then grunt?

finally got it working - npm install grunt-contrib-qunit --save-dev - https://github.com/gruntjs/grunt-contrib-qunit

Code for Review : https://github.com/dekajp/jquery-ui/commit/cbfbcd79498388fd6fe549eeb2b2eb351dc578e9

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

Resolution: fixed
Status: openclosed

Dialog: Apply overflow: hidden to contain the resize handles

Fixes #9521 Closes gh-1092

Changeset: 7741c9f678088a129c1782f4e7f061bc12a41279

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

Dialog: Apply overflow: hidden to contain the resize handles

Fixes #9521 Closes gh-1092 (cherry picked from commit 7741c9f678088a129c1782f4e7f061bc12a41279)

Changeset: b6f8ad665f455a4234f09956027ca23b477838db

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

Milestone: none1.10.4

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

Summary: Dialog: Resiable dialogs move/resize out of viewpoint boundryDialog: Resizable dialogs move/resize out of viewpoint boundry
Note: See TracTickets for help on using tickets.