Core modals are an ongoing problem for years, damaging the author experience alot.

Completely weird JS resizing behavior, so the modal and its contents are moved around, the form actions too. This drives every author nuts.

Till the core issue is fixed, we should quickfix this by overriding position and dimensions with CSS !important. Fixed, instead of absolute positioning, etc.

See the various core issues: https://www.drupal.org/project/issues/drupal?text=modal
https://www.drupal.org/project/drupal/issues/2158943#comment-14644901
https://www.drupal.org/project/drupal/issues/2707291

This comment is very helpful about the Core dialogs Javascript callbacks/actions: https://www.drupal.org/project/drupal/issues/2158943#comment-13248532

Comments

thomas.frobieter created an issue. See original summary.

thomas.frobieter’s picture

thomas.frobieter
Primary language German
Location EU
CreditAttribution: thomas.frobieter commented

It seems these couple of lines fix the whole thing pretty well:

.ui-dialog.ui-widget-content {
  position: fixed !important;
  top: 50% !important;
  width: 100% !important;
  max-width: 800px !important;
  max-height: calc(100vh - 2rem) !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15) !important;
}

I'll cleanly apply this later.. unable to compile the SCSS currently..

  • thomas.frobieter committed 6174765 on 2.x 
    Issue #3303238: Quickfix Core Modal behavoir: Weird jumping and resizing

  • thomas.frobieter committed 3be99c1 on 2.x 
    Issue #3303238: Quickfix Core Modal behavoir: Weird jumping and resizing...
thomas.frobieter’s picture

thomas.frobieter
Primary language German
Location EU
CreditAttribution: thomas.frobieter commented

SO, this seems to be nearly perfect now. I'll create the release!

I've added a JS file to set body classes on modal open & close, so we are also able to block the damn body scrolling in the background.

thomas.frobieter’s picture

thomas.frobieter
Primary language German
Location EU
CreditAttribution: thomas.frobieter commented
Status: Active » Fixed
thomas.frobieter’s picture

thomas.frobieter
Primary language German
Location EU
CreditAttribution: thomas.frobieter commented
Issue summary: View changes
Related issues: +#2707291: Disable body-level scrolling when a dialog is open as a modal, +#2158943: Add a native dialog element to deprecate the jQuery UI dialog
thomas.frobieter’s picture

thomas.frobieter
Primary language German
Location EU
CreditAttribution: thomas.frobieter commented
Issue summary: View changes
thomas.frobieter’s picture

thomas.frobieter
Primary language German
Location EU
CreditAttribution: thomas.frobieter commented
Title: Quickfix Core Modal behavoir: Weird jumping and resizing » Quickfix Core Dialog/Modal behavoir: Weird jumping and resizing
thomas.frobieter’s picture

thomas.frobieter
Primary language German
Location EU
CreditAttribution: thomas.frobieter commented
Title: Quickfix Core Dialog/Modal behavoir: Weird jumping and resizing » Quickfix Core Dialog/Modal behavoir: Weird jumping, resizing & body scrolling

  • thomas.frobieter committed 346e0e2 on 2.x 
    Issue #3303238 by thomas.frobieter: Quickfix Core Dialog/Modal behavoir...
  • thomas.frobieter committed 5c7b023 on 2.x
    Issue #3303238 by thomas.frobieter: Quickfix Core Dialog/Modal behavoir...

Status: Fixed » Closed (fixed)

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