jQuery UI dialog modals repositions incorrectly on window resize when there is a off canvas rendered

Created on 15 August 2019, over 5 years ago
Updated 18 July 2023, over 1 year ago

Problem/Motivation

If you have a jQuery UI dialog modal (a dialog having the modal configuration set to TRUE) and a Off canvas rendered at the same time (i.e. the dialog is opened via the Off canvas), the modal is repositioned incorrectly when resizing the window.

Here is an example using Layout Builder and the contrib. module Layout Builder Modal:

(thanks to kevinfunk for providing the GIF in #3074302)

The expected behaviour here would be that the modal keeps being centered on window resize.

You can also reproduce this behaviour in Drupal core:

            <a href="/node/add/page" class="use-ajax" data-dialog-options='{"width": 500,"modal": true,"autoResize":true}' data-dialog-type="dialog">Dialog</a>

            <a href="/node" class="use-ajax" data-dialog-renderer="off_canvas" data-dialog-type="dialog">Off canvas</a>

If you only would open the Dialog, it would resize and the position would be as expected. But if you first open the off canvas, and then the dialog the same behaviour as with Layout Builder Modal.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Needs review

Version

11.0 🔥

Component
Javascript 

Last updated 4 days ago

Created by

🇸🇪Sweden johnwebdev

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024