#9521 closed bug (fixed)

Opened August 27, 2013 10:30PM UTC

Closed January 15, 2014 09:26AM UTC

Last modified January 17, 2014 01:39PM UTC

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.

Attachments (0)

Change History (13)

Changed August 28, 2013 12:25PM UTC by tj.vantoll comment:1

status:	new → open
summary:	1.10.3 - Dialog move/resize out of viewpoint boundry → Dialog: move/resize out of viewpoint boundry
version:	1.10.3 → 1.10.0

The regression occurred in 1.10.

Changed August 28, 2013 12:26PM UTC by tj.vantoll comment:2

1.9.2: http://jsfiddle.net/tj_vantoll/ENAEp/

1.10.3: http://jsfiddle.net/tj_vantoll/QY6S3/

Changed September 18, 2013 04:19AM UTC by dekajp comment:3

_comment0:	It seems that scrollbar appears because of resizable property. i think it's the resizable handles which is causing the issue . Am i heading right ? \ \ http://jsfiddle.net/dekajp/QY6S3/1/ → 1379481763482551

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/

Changed September 18, 2013 11:53AM UTC by tj.vantoll comment:4

keywords:	→ regression
summary:	Dialog: move/resize out of viewpoint boundry → Dialog: Resiable dialogs move/resize out of viewpoint boundry

Replying to [comment:3 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.

Changed September 21, 2013 09:27PM UTC by dekajp comment:5

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 [comment:4 tj.vantoll]:

Replying to [comment:3 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.

Changed September 21, 2013 11:46PM UTC by tj.vantoll comment:6

Replying to [comment:5 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 [comment:4 tj.vantoll]: > Replying to [comment:3 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

Changed September 22, 2013 12:12AM UTC by dekajp comment:7

Replying to [comment:6 tj.vantoll]:

Replying to [comment:5 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 [comment:4 tj.vantoll]: > > Replying to [comment:3 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

Changed September 22, 2013 03:52AM UTC by dekajp comment:8

Replying to [comment:7 dekajp]:

Replying to [comment:6 tj.vantoll]: > Replying to [comment:5 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 [comment:4 tj.vantoll]: > > > Replying to [comment:3 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

Changed October 12, 2013 11:24PM UTC by dekajp comment:9

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

Changed January 15, 2014 09:26AM UTC by Scott González comment:10

resolution:	→ fixed
status:	open → closed

Dialog: Apply overflow: hidden to contain the resize handles

Fixes #9521

Closes gh-1092

Changeset: 7741c9f678088a129c1782f4e7f061bc12a41279

Changed January 15, 2014 09:27AM UTC by Scott González comment:11