Opened 7 years ago

Closed 7 years ago

#15181 closed defect (fixed)

Bad Automatic Placement for dojox.mobile.SimpleDialog in nested views

Reported by: Soyhy Lim Owned by: ykami
Priority: high Milestone: 1.8
Component: DojoX Mobile Version: 1.7.2
Keywords: Cc:
Blocked By: Blocking:

Description

The position property is not correctly defined for the .mblSimpleDialog style sheet.

In dojox/mobile/SimpleDialog.js , the refresh function computes the coordinates of the dialog to put it at the center of the top window. When the dialog is used in a nested view, it may not be centered in any window.

This is caused by the position property defined for .mblSimpleDialog (dojox/mobile/themes/*/SimpleDialog.css, generated by dojox/mobile/themes/common/SimpleDialog.less):

  • Currently, that position property is set to absolute, which means the element is positioned relative to its first positioned (not static) ancestor element.
  • The correction value should be fixed, which means the element is positioned relative to the browser window, to correspond to the coordinates computed by the refresh function.

Patch attached.

Attachments (1)

patchSimpleDialogPosition.txt (2.0 KB) - added by Soyhy Lim 7 years ago.
patch of SimpleDialog?.css (for the themes) and SimpleDialog?.less (common)

Download all attachments as: .zip

Change History (5)

Changed 7 years ago by Soyhy Lim

patch of SimpleDialog?.css (for the themes) and SimpleDialog?.less (common)

comment:1 Changed 7 years ago by ykami

Thanks for the report and the patch.
Have you tested it on all the devices? position:fixed is often problematic on devices, so I've been avoiding using it.
Also, some users may want place a dialog at the center of a div pane.
If you want it at the center of the screen, it should be placed directly under the <body> (and that is the typical usage).

comment:2 Changed 7 years ago by Soyhy Lim

I have only tested with Safari, Firefox and Chrome on the desktop, and with Safari on iPhone and iPad.

I do agree that the typical usage is at <body> level.

Otherwise, you also mentioned it, in some cases, it's useful to have the dialog at the center of a sub-view. However, it seems that the refresh function of SimpleDialog which computes the coordinates of the dialog does not expect that case.

comment:3 Changed 7 years ago by ykami

Milestone: tbd1.8
Priority: undecidedhigh
Status: newassigned

OK, you are correct. refresh() is not expecting such cases. Then I will add code to move the dialog dom node right under the body element after creating the dialog. That's what dijit.Dialog is doing. Thanks.

comment:4 Changed 7 years ago by ykami

Resolution: fixed
Status: assignedclosed

In [28364]:

Fixes #15181 Move the dialog dom node right under the body element after creating the dialog. !strict

Note: See TracTickets for help on using tickets.