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.

CommentFileSizeAuthor
#5 core-js-modal-position-2702619-5.patch1.39 KBbronzehedwick
#3 core-js-modal-position-2702619-2.patch5.62 KBnod_
#2 2702619-lost-space-for-screens-in-landscape-mode.png105.99 KBpivica
#2 2702619-modal-dialog-and-responsive-menu-problem.png84.66 KBpivica

Comments

pivica created an issue. See original summary.

pivica’s picture

pivica commented
Issue summary: View changes
StatusFileSize
new 2702619-modal-dialog-and-responsive-menu-problem.png84.66 KB
new 2702619-lost-space-for-screens-in-landscape-mode.png105.99 KB
nod_’s picture

nod_
Primary language French
Location Lille
commented
Status: Active » Needs work
StatusFileSize
new core-js-modal-position-2702619-2.patch5.62 KB

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

droplet’s picture

droplet commented
Related issues: +#2672344: [UX] Open as Modal should not able to interact with other elements, +#2671870: Drupal dialogs overflow in small resolutions when vertical toolbar is open
bronzehedwick’s picture

bronzehedwick
he/him
Location New York
commented
Version: 8.1.x-dev » 8.2.x-dev
StatusFileSize
new core-js-modal-position-2702619-5.patch1.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.

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

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.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.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.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.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.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.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.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.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

smustgrave’s picture

smustgrave commented
Status: Needs work » Postponed (maintainer needs more info)
Issue tags: +stale-issue-cleanup

Thank you for sharing your idea for improving Drupal.

We are working to decide if this proposal meets the Criteria for evaluating proposed changes. There hasn't been any discussion here for over 8 years which suggests that this has either been implemented or there is no community support. Your thoughts on this will allow a decision to be made.

Since we need more information to move forward with this issue, the status is now Postponed (maintainer needs more info). If we don't receive additional information to help with the issue, it may be closed after three months.

Thanks!

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

smustgrave’s picture

smustgrave commented
Status: Postponed (maintainer needs more info) » Closed (outdated)

Since there's been no follow up and was a feature request going to close out.

Also mentioning that toolbar may soon be deprecated in D12 (or 13)

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.