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.
In specific dimensions when editing/adding content modal dialogs seem to break (and it's not possible to close them).
This happens when vertical toolbar is open, width is less than 48em and content is still next to the toolbar, not behind it.
Comment | File | Size | Author |
---|---|---|---|
#13 | quick_edit_dialog.png | 145.18 KB | darketaine |
#8 | add_block.png | 200.62 KB | darketaine |
#8 | quick_edit.png | 144.4 KB | darketaine |
#8 | ckeditor.png | 136.58 KB | darketaine |
#7 | before.png | 19.16 KB | Sumit kumar |
Comments
Comment #2
Wim LeersReproduced.
This is related to
displace.js
(thecore/drupal.displace
asset library).That makes sure that any other JS is aware of the "actual content area", which is the browser viewport minus the space the toolbar consumes. The toolbar informs
displace.js
about its dimensions. Then other JS can be aware of it, and not overlap.Not quite sure what to do here. We have no
component. So, moving this to for now. Hoping @nod_ has suggestions how to solve this.My suggestion would be: as soon as a dialog is opened (
dialog.js
does$(window).trigger('dialog:beforecreate', [dialog, $element, settings]);
, so you can listen for that), let the toolbar close its vertical toolbar to make room.Comment #3
darketaine CreditAttribution: darketaine as a volunteer commentedThere is another workaround, with theming.
It would require a left: 4% !important (cause yes, it's defined from js) as in Seven the dialog width in media query (max-width: 48em) is forced to 92%.
Comment #4
Wim LeersBut the same problem exists in other themes. We should fix it in all themes at once, not add a hack to one specific theme.
Comment #5
darketaine CreditAttribution: darketaine as a volunteer commentedYeah, you are probably right. It's just that in some themes (like Seven) the dialog's width is set 'overriding' javascript's output. That's why I thought of a more specific-theme-oriented solution. Of course the best solution is through js
Comment #6
droplet CreditAttribution: droplet commentedWhen it opened as Modal, you can't perform any other actions. Shifting to right seems not a right approach. It's odd. Also patch make it consistent with other CKeditor dialogs.
Comment #7
Sumit kumar CreditAttribution: Sumit kumar as a volunteer commented#6 is working
See Attachment
Comment #8
darketaine CreditAttribution: darketaine as a volunteer commentedI see 2 issues here:
* The first one is that for dialogs that come from ckeditor like link and image I still see it overflow.
* Other dialogs like those on #7 screenshots are behind the vertical toolbar though they should overlap it, as in ckeditor's dialogs. (I don't know if the x-axis positioning in this case was wrong before the #6 patch too and it got fixed)
The issue here is that it seems they have a different positioning (both in x and z- axis) depending where they come from. I think they should have the same 'behaviour' all over.
Comment #9
droplet CreditAttribution: droplet commenteddid you clean caches ?
Comment #10
droplet CreditAttribution: droplet commentedAbout `block`, I think it's another issue. z-index should be higher than toolbar
Comment #11
droplet CreditAttribution: droplet commentedSorry for the noise
Comment #12
darketaine CreditAttribution: darketaine as a volunteer commentedYes I did. If you see it fixed another person should upload a screenshot coming from the ckeditor.
The other thing I mentioned is caused from the z-index (which is different in the ckeditor screenshot and the add_block one), but I mentioned it here as that one in the blocks seems to be OK in the x-axis which implies a different behavior (which I think is weird)
Comment #13
darketaine CreditAttribution: darketaine as a volunteer commentedAnd yeap, now I see it (from incognito, seems my browser caches forever)
I guess the z-index issue can go to the issue you opened
Comment #15
harilakshmanan CreditAttribution: harilakshmanan commentedComment #16
slashrsm CreditAttribution: slashrsm at MD Systems GmbH for Acquia commented#6 fixes #2712127: Embed dialog is misplaced if side tool-bar is used, which is obviously a duplicate. What is missing in this patch to be RTBC?
Comment #17
thenchev CreditAttribution: thenchev at MD Systems GmbH for Acquia commentedWorks great for me. I think we can RTBC this.
Comment #19
thenchev CreditAttribution: thenchev at MD Systems GmbH for Acquia commented8.2 tests are green and 8.1 seem unrelated.
Comment #21
Wim LeersGreen for a month, now a random fail.
Comment #22
xjmThanks for working on this! Assigning frontend RTBC issues to Cottser for possible review.
Comment #25
star-szrSorry for the delay on this one.
Committed and pushed 97a10c0 to 8.2.x and e17314e to 8.1.x. Thanks!
Comment #26
star-szrComment #30
Sumit kumar CreditAttribution: Sumit kumar as a volunteer and at gai Technologies Pvt Ltd commented