Magnolia CMS 6.2.3版本编辑对话框过宽问题求助

Got it, let's tackle this full-width dialog issue you're facing in Magnolia 6.2.3 after migrating from 5.5.8. Since upgrading to 6.2.4 (where this bug is fixed) isn't feasible right now, here are three practical workarounds to get your dialogs back to the proper medium width:

1. Global CSS Override (Fastest Fix) #

This approach directly applies the missing medium class styles to all 5 UI dialogs without touching code or configurations extensively.

• How to implement:
  1. Create a custom CSS file (e.g., fix-dialog-width.css) in your module's webresources folder.
  2. Add this CSS snippet to it:

  /* Mimics the 'medium' class constraints for 5 UI dialogs */
  .v-window.mgnl-dialog .v-window-content {
    max-width: 800px; /* Matches Magnolia's default medium dialog width */
    width: 90%;
    margin: 0 auto;
  }
  

  3. Register this CSS file in your module descriptor, or upload it via the Resources app and link it to the admincentral configuration (under /modules/admincentral/config/styles).

This will immediately constrain all 5 UI dialogs (including system ones) to a reasonable width, just like the medium class does.

2. Programmatic Class Injection (Robust, Mimics Native Behavior) #

If you want to replicate the exact fix that was introduced in 6.2.4 (adding the medium class to dialog roots), you can use a small JavaScript snippet to inject the class automatically whenever a dialog loads.

• How to implement:
  1. Create a JavaScript file (e.g., inject-dialog-medium-class.js) in your module's webresources.
  2. Add this code:

  // Observe the DOM for new dialog elements and add the medium class
  const dialogObserver = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        if (node.classList?.contains('mgnl-dialog')) {
          const dialogContent = node.querySelector('.v-window-content');
          if (dialogContent) dialogContent.classList.add('medium');
        }
      });
    });
  });
  
  // Start observing when the admin interface loads
  document.addEventListener('DOMContentLoaded', () => {
    dialogObserver.observe(document.body, { childList: true, subtree: true });
  });
  

  3. Register this JS file in your module descriptor so it loads with the admin interface.

This approach ensures dialogs get the exact same styling as they would in a fixed version of Magnolia.

3. Per-Dialog Configuration Override (Granular Control) #

If you only need to fix specific dialogs or prefer a configuration-based approach, you can override individual dialog definitions to explicitly set their width.

• How to implement:
  1. Open the Configuration app in Magnolia.
  2. Navigate to the dialog you want to fix (e.g., /modules/dam/dialogs/assets/edit for a system asset dialog, or your custom dialog paths).
  3. Add or update the width property at the root of the dialog definition, setting its value to medium.

This works for both custom and system dialogs, but note that you'll need to do this for every affected dialog individually.

Why This Happens #

As you correctly diagnosed, this is a known bug specific to Magnolia 6.2.3 where the medium class (which limits dialog width) isn't automatically applied to Magnolia 5 UI dialogs. The issue was resolved in 6.2.4, but since upgrading isn't an option right now, the above workarounds will restore the intended dialog behavior.

Importantly, this doesn't affect 6 UI apps like pages-app or the new DAM because they use a completely redesigned dialog system that doesn't rely on the same class-based width constraints.

内容的提问来源于stack exchange，提问作者Robotregent