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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

darketaine created an issue. See original summary.

Wim Leers’s picture

Component: Seven theme » javascript
Issue tags: +JavaScript

Reproduced.

This is related to displace.js (the core/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 dialog system component. So, moving this to javascript 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.

darketaine’s picture

There 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%.

Wim Leers’s picture

But the same problem exists in other themes. We should fix it in all themes at once, not add a hack to one specific theme.

darketaine’s picture

Yeah, 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

droplet’s picture

Status: Active » Needs review
FileSize
581 bytes

When 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.

Sumit kumar’s picture

#6 is working
See Attachment

darketaine’s picture

Status: Needs review » Needs work
FileSize
136.58 KB
144.4 KB
200.62 KB

I 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.

droplet’s picture

did you clean caches ?

droplet’s picture

Status: Needs work » Needs review

About `block`, I think it's another issue. z-index should be higher than toolbar

droplet’s picture

darketaine’s picture

Yes 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)

darketaine’s picture

FileSize
145.18 KB

And 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

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

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

harilakshmanan’s picture

Assigned: Unassigned » harilakshmanan
slashrsm’s picture

#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?

thenchev’s picture

Status: Needs review » Reviewed & tested by the community

Works great for me. I think we can RTBC this.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 6: modal-no-padding.patch, failed testing.

thenchev’s picture

Status: Needs work » Reviewed & tested by the community

8.2 tests are green and 8.1 seem unrelated.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 6: modal-no-padding.patch, failed testing.

Wim Leers’s picture

Status: Needs work » Reviewed & tested by the community

Green for a month, now a random fail.

xjm’s picture

Assigned: harilakshmanan » star-szr

Thanks for working on this! Assigning frontend RTBC issues to Cottser for possible review.

  • Cottser committed 97a10c0 on 8.2.x
    Issue #2671870 by droplet, darketaine, Sumit kumar: Drupal dialogs...

  • Cottser committed e17314e on 8.1.x
    Issue #2671870 by droplet, darketaine, Sumit kumar: Drupal dialogs...
star-szr’s picture

Assigned: star-szr » Unassigned
Status: Reviewed & tested by the community » Fixed

Sorry for the delay on this one.

Committed and pushed 97a10c0 to 8.2.x and e17314e to 8.1.x. Thanks!

star-szr’s picture

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

  • Cottser committed 97a10c0 on 8.3.x
    Issue #2671870 by droplet, darketaine, Sumit kumar: Drupal dialogs...

  • Cottser committed 97a10c0 on 8.3.x
    Issue #2671870 by droplet, darketaine, Sumit kumar: Drupal dialogs...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Sumit kumar’s picture