Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Problem/Motivation
The Drupal dialog can get visually lost behind persistent, overlaying viewport elements like the Toolbar.
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.
Related Issues
#1961788: Views modals get stuck under the vertical toolbar
Original report by jessebeach
Comment | File | Size | Author |
---|---|---|---|
#18 | core-js-dialog-position-2067263-18.patch | 7.31 KB | nod_ |
#17 | core-js-dialog-position-2067263-17.patch | 7.26 KB | nod_ |
#16 | core-js-dialog-position-2067263-16.patch | 7.21 KB | nod_ |
#15 | core-js-dialog-position.patch | 6.89 KB | nod_ |
#12 | dialog.png | 100.55 KB | jantimon |
Comments
Comment #1
jessebeach CreditAttribution: jessebeach commentedFixing the grammar in the title.
Comment #2
jessebeach CreditAttribution: jessebeach commentedUgh, and the component. Doing too many things at once :/
Comment #3
tim.plunkettAs we start putting more and more essential forms into this, it starts breaking Drupal.
Comment #4
Kiphaas7 CreditAttribution: Kiphaas7 commentedSome legacy topics which are semi-related to this and might have some value to this discussion:
#36 of #1010080: Input elements overlap sticky tableheader
#1440628: [Meta] javascript toolbar/tableheader with url fragment mess
#787940: Generic approach for position:fixed elements like Toolbar, tableHeader
#1847084: Measure/track displacing elements better + provide change events for them (fix overlay + toolbar)
Comment #5
nod_Knee-jerk "problem solved" patch.
Comment #6
nod_The right way is to mess with the draggable
containment
option of jQuery ui by putting values fromDrupal.displace.offsets
.Comment #7
larowlanPatch at #5 lets me add a block on my phone so thats a win.
Comment #8
nod_For reference the auto thing has been added in the middle of #1879120: Use Drupal-specific image and link plugins — use core dialogs rather than CKEditor dialogs, containing alterable Drupal forms.
Comment #9
nod_Less obnoxious patch that do the same as #5
Comment #10
jessebeach CreditAttribution: jessebeach commentedThe change in #9 is a step in the right direction!
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.
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.
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.
Comment #11
dealancer CreditAttribution: dealancer commentedThat'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.
Comment #12
jantimon CreditAttribution: jantimon commentedThe #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.
Comment #13
nod_let's not worry too much about the overlay #787896: Add a link so that administrators can return to their most recently visited non-admin page #2088121: Remove Overlay.
Comment #14
webchickWe can't possibly ship D8 with the dialog acting like this. (see #1851414-93: Convert Views to use the abstracted dialog modal)
Comment #15
nod_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.
Comment #16
nod_ok, pretty easy after all. Review away!
Comment #17
nod_Next time i'll finish writting my comments before posting a patch :p
Comment #18
nod_little explanation on what the patch is doing:
Remove all superfluous code from
dialog.js
and move all the Drupal-specific positioning code todialog.position.js
. In that file we listen to resize, scroll and drupalViewportOffsetChange and move the dialog to the center of the area defined withinDrupal.displace.offsets
. During the evaluation of height % values we compute the number based on theDrupal.displace.offsets
area.Forgot to unbind the event listener on the document. Rolled a patch with the change.
Comment #19
eigentor CreditAttribution: eigentor commentedApplied 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?
Comment #20
nod_you need to not use the overlay. Check out #1851414: Convert Views to use the abstracted dialog modal. I should probably close this one.