Problem/Motivation

By default core dialog positioning code will position dialog on the middle of the screen but will also take care about toolbar dimensions so dialog will not cover toolbar. This does not make too much sense for dialog of type modal and also we are loosing valuable space on small screens (mobile and tablet landscape mode):

Also on tablet portrait some weird situations can happen - when actually you first display modal dialog and then click on 'Manage' toolbar link to show responsive menu:

If we take a look at definition of modal dialog (https://en.wikipedia.org/wiki/Modal_window) next is stated:

In user interface design, a modal window is a graphical control element subordinate to an application's main window which creates a mode where the main window can't be used.

Note the part "where the main window can't be used.", and currently we are actually allowing main window to be used (toolbar section) for modal dialogs.

Proposed resolution

If dialog is of type modal we should not allow user to use toolbar section. Overlay should cover toolbar and dialog should use the whole viewport area when calculating it position - which allows it to also cover toolbar if/when needed.

Remaining tasks

  • Discussion about this is probably needed first.
  • Provide a patch.

User interface changes

Users will not be able to interact with toolbar elements when modal dialog is on page. First they need to finish or cancel modal dialog action and then return to base page.

API changes

None.

Data model changes

None.

Comments

pivica created an issue. See original summary.

pivica’s picture

nod_’s picture

Status: Active » Needs work
FileSize
5.62 KB

Initial patch taking care of the positioning, code needs work.

bronzehedwick’s picture

Version: 8.1.x-dev » 8.2.x-dev
FileSize
1.39 KB

Took a crack at this against 8.2.x. It just fixes positioning for modals, however I did notice that non-modal dialogs seem to suffer from the same issue.

Where is the use case for the left / top offset in resetPosition? That's the part that's causing the misalignment, and I'm sure it's there for a good reason, but I'm just not familiar enough with the code base to know where it applies.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.