Problem/Motivation

The Drupal dialog can get visually lost behind persistent, overlaying viewport elements like the Toolbar.

Screenshot of an image editing dialog. It is positioned behind the Drupal toolbar administration menu tray.

Proposed resolution

I have a solution using Drupal.displace for the Views modal. It's probably bit-rotten and won't apply, but it gives a good illustration of where to start.

Remaining tasks

Make the Drupal dialog position itself within the space left by displacing elements.

User interface changes

Dialog contents won't be visually hidden.

API changes

None.

#1961788: Views modals get stuck under the vertical toolbar

Original report by jessebeach

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jessebeach’s picture

Title: Drupal dialog placement must take displacing viewport, like the Toolbar, in account when calculating placement » Drupal dialog placement must take displacing viewport elements, like the Toolbar, into account when calculating placement

Fixing the grammar in the title.

jessebeach’s picture

Component: theme system » javascript

Ugh, and the component. Doing too many things at once :/

tim.plunkett’s picture

Priority: Normal » Major

As we start putting more and more essential forms into this, it starts breaking Drupal.

nod_’s picture

Status: Active » Needs work
FileSize
2.53 KB

Knee-jerk "problem solved" patch.

nod_’s picture

The right way is to mess with the draggable containment option of jQuery ui by putting values from Drupal.displace.offsets.

larowlan’s picture

Patch at #5 lets me add a block on my phone so thats a win.

nod_’s picture

nod_’s picture

Less obnoxious patch that do the same as #5

jessebeach’s picture

The change in #9 is a step in the right direction!

Screenshot of the Drupal Dialog position above the Toolbar

We still have several edge cases to solve here.

A modal should be modal

This means that the screen should prevent a user from interacting with any on-screen elements but the modal until a decision has been made by the user.

Screenshot of the Drupal Dialog positioned above the Toolbar. The modal screen is positioned above the Toolbar.

The Overlay is position below the Toolbar, so a modal in the Overlay is as well. Wah Wah.

We need to pull the Overlay above any other elements on the page if there's a modal dialog open in it to give the appearance to an end user that this is a seamless experience.

Screenshot of the Drupal Dialog, opened in the Overlay, positioned below the Toolbar.

The non-modal dialog

A non-modal, because it does not have the convenience of the screen, must still be aware of the displacing elements on the page and position itself in such a way that it doesn't underlap them.

dealancer’s picture

That's weird but patch #9 does not solve the problem and I still see the dialog below the menu. Also patch #5 could not be applied. Chrome 28.0.1500.71 (and FF 23.0) on Ubuntu 13.04.

jantimon’s picture

FileSize
100.55 KB

The #9 patch of nod_ works for me but I have the same issue like jessebeach in #10.

The bug described by jesse occurs because the modal dialog is inside the node-add iframe.

dialog.png

nod_’s picture

webchick’s picture

Priority: Major » Critical

We can't possibly ship D8 with the dialog acting like this. (see #1851414-93: Convert Views to use the abstracted dialog modal)

nod_’s picture

Work in progress, just posting what I have before passing out.

I will not fix the overlay problem with dialog. I'm not going to append the modal to the parent window, that's becoming insane.

nod_’s picture

Status: Needs work » Needs review
FileSize
7.21 KB

ok, pretty easy after all. Review away!

nod_’s picture

Next time i'll finish writting my comments before posting a patch :p

nod_’s picture

little explanation on what the patch is doing:

Remove all superfluous code from dialog.js and move all the Drupal-specific positioning code to dialog.position.js. In that file we listen to resize, scroll and drupalViewportOffsetChange and move the dialog to the center of the area defined within Drupal.displace.offsets. During the evaluation of height % values we compute the number based on the Drupal.displace.offsets area.

Forgot to unbind the event listener on the document. Rolled a patch with the change.

eigentor’s picture

Applied the patch from #18. Still getting the same behaviour:
http://screencast.com/t/MgkajUanW
Am I getting something wrong or do I need to do something else more than clear cache after applying the patch?

nod_’s picture

Status: Needs review » Closed (duplicate)

you need to not use the overlay. Check out #1851414: Convert Views to use the abstracted dialog modal. I should probably close this one.