Section content is shown above the off canvas dialog

It looks like var(--jui-dialog-z-index) is not set in claro.

In Oliveiro there is no issue because they set an z-index on the ui-dialog, i can do the same in our theme.

There probably is a problem elsewhere, i'm not sure on what the ideal approach would be for where to fix this.

Hi,

I am having the same issue with Layout Builder Modal.

I tried to uninstall it, same problem.

I have errors in browser console when the Lyaout Builder modal try to resize when I open/close browser debugger.

This is happening for me on core 10.0.7 with the following patch applied on core:

"2 - jQuery UI library order is incorrect when a large number of javascript files is loaded between two jQuery UI libraries - https://www.drupal.org/project/drupal/issues/3222107#comment-14154468": "https://www.drupal.org/files/issues/2021-07-05/3222107-8.patch"

On a similar project on Core 9.5.7 (and same patch) no problem.

See attached screenshots.

I will try @svdhout solution.

Adding the following CSS (from Olivero) in custom theme is a partial solution:

.ui-widget-overlay {
  z-index: 1259;
}
.ui-dialog {
  z-index: 1260;
}

Because for example after that, the close button does not appear, because of other CSS variables not defined:

var(--jui-dialog-close-button-size)

I will search for a core bug.

I have not searched for a core bug finally.

But here is the SASS I am adding into my custom theme:

:root {
  /**
   * jQuery.UI dialog.
   */
  --jui-dialog-close-button-size: calc(var(--gin-spacing-m) * 2);
  --jui-dialog-close-button-border-radius: 50%;
  --jui-dialog-close-button-reserved-space: calc(var(--gin-spacing-m) * 4);
  --jui-dialog-off-canvas-close-button-reserved-space: calc(var(--gin-spacing-m) * 3);
  --jui-dialog-border-radius: 0.25rem;
  --jui-dialog-box-shadow: 0 0 var(--gin-spacing-m) calc(var(--gin-spacing-m) / -4) var(--gin-color-text);
  --jui-dialog-z-index: 1260;
  --jui-dialog-off-canvas-z-index: 501;
}

// Close button content and color management. as the one provided by jQuery UI is not generated.
.ui-dialog-titlebar-close {
  &:after {
    display: inline-block;
    content: "\00d7";
    font-size: 32px;
  }

  .ui-dialog &:after {
    background-color: #1b1b1d;
    color: #fff;
  }

  .ui-dialog.ui-dialog-off-canvas &:after {
    background-color: var(--gin-bg-layer);
    color: var(--gin-color-title);
  }
}

Hi @Grimreaper I add the z-index handling in the current dev. Can you check if it works for you? I only add it for D10. Check _ui-dialog_10

Hi @Christian.wiedemann,

I removed the SCSS on my custom theme and test with the latest dev version.

Ok for me. Thanks!

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

Thanks to everyone

I still have this issue but not in all places though, I attached screenshots

My setup

• Drupal 10.1.1
• Gin Layout Builder 1.0.0-rc4