Opened 4 years ago

Last modified 2 years ago

#18737 new defect

dijit/Dialog: doesn't _position center if dialog.width > viewport.width

Reported by: yushengh Owned by: yushengh
Priority: undecided Milestone: 1.14
Component: Dijit Version: 1.10.4
Keywords: Cc:
Blocked By: Blocking:

Description

Prerequisites: dialog.width is larger than the browser minimum width. (Keep fewer tabs in your chrome browser to make the browser minimum width smallest)

If the dialog.width > viewport.width, when resizing the browser window width to minimum in a fast speed. In dijit/Dialog.js code base, it will invoke the resize() function twice, but the second time the _position() function which puts the dialog to the center will not be called.

That means if the dialog width is larger than the browser minimum width and resize fast, it will only resize the dialog itself, but not auto center the dialog.

Try it in the following JSFiddle: http://fiddle.jshell.net/wwmowff9/11/show/

Resize the browser divider quickly, you will see the dialog will be hidden by the browser. Some side effects are if the there is a select in the dialog, and when dialog is being hidden, press the "enter" button will make the select dropdown options show outside of the browser window.

Change History (6)

comment:1 Changed 4 years ago by bill

Owner: changed from bill to yushengh
Status: newpending

I can reproduce the problem on your fiddle on FF/mac (although it works on Chrome/mac). However, your fiddle is with a custom widget with a custom template (albeit the final result looks exactly like the example from the test_Dialog.html page). Can you make a test case reproducing the problem with the actual Dialog widget?

comment:2 in reply to:  1 Changed 4 years ago by yushengh

Status: pendingnew

Replying to bill:

I can reproduce the problem on your fiddle on FF/mac (although it works on Chrome/mac). However, your fiddle is with a custom widget with a custom template (albeit the final result looks exactly like the example from the test_Dialog.html page). Can you make a test case reproducing the problem with the actual Dialog widget?

I couldn't reproduce it using simple dijit/Dialog example. http://jsfiddle.net/yushengh/fL3q1f0L/4/show/

But a little complex example using template could reproduce this bug. (Resize quickly will not auto center the dialog) http://jsfiddle.net/yushengh/wkydY/443/show/

comment:3 Changed 4 years ago by bill

Probably you are hitting the error because you are setting an explicit size on the Dialog's outer element. You aren't supposed to do that. But I'll try to confirm that later.

comment:4 in reply to:  3 Changed 4 years ago by yushengh

Replying to bill:

Probably you are hitting the error because you are setting an explicit size on the Dialog's outer element. You aren't supposed to do that. But I'll try to confirm that later.

I found another same ticket around this issue in https://bugs.dojotoolkit.org/ticket/18209. When bb.w >= viewport.w, dim becomes an object, so _position() will not be called to reposition the dialog into view.

if(!has("touch") && !dim){

this._position();

}

comment:5 Changed 4 years ago by dylan

Milestone: tbd1.12

comment:6 Changed 2 years ago by dylan

Milestone: 1.131.14
Note: See TracTickets for help on using tickets.