Dialog: Resizable dialogs move/resize out of viewpoint boundry

[zoggy]

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.

[tj.vantoll]

The regression occurred in 1.10.

[tj.vantoll]

1.9.2: ​http://jsfiddle.net/tj_vantoll/ENAEp/ 1.10.3: ​http://jsfiddle.net/tj_vantoll/QY6S3/

[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/

[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.

[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.

[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?

[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

[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

[dekajp]

PR -> ​https://github.com/jquery/jquery-ui/pull/1092

[Scott González]

Dialog: Apply overflow: hidden to contain the resize handles

Fixes #9521 Closes gh-1092

Changeset: 7741c9f678088a129c1782f4e7f061bc12a41279

[Scott González]

Dialog: Apply overflow: hidden to contain the resize handles

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

Changeset: b6f8ad665f455a4234f09956027ca23b477838db