Contrib.social

Allow entity browser modals wider than 500px

Open on Drupal.org →
Created on 9 April 2024, 3 months ago
Updated 24 April 2024, 2 months ago

Problem/Motivation

In my testing, all entity browser modals opened by the ckeditor5_entity_browser have a max-width of 500px (in Claro). The constrained width impacts the UX in views with multiple exposed filter fields and/or table displays with multiple fields.

This happens because:

  1. The modal is opened with Drupal.ckeditor5.openDialog which unconditionally adds the css class .ui-dialog--narrow to the resulting dialog.
  2. In Claro, .ui-dialog--narrow sets a max-width of 500px for any viewport wider than 600px.

Steps to reproduce

Open any entity browser from the ckeditor5_entity_browser in the Claro admin theme, note that the modal is constrained to 500px on viewports larger than 600px.

Proposed resolution

Provide a unique dialog class via dialogSettings (e.g. .ckeditor5-entity-browser-dialog) to make it easier to override styling. Then attach a bit of CSS to allow wider modals in ckeditor5_entity_browser_form_entity_browser_form_alter().

With the custom class added, the CSS might be something like:

.ckeditor5-entity-browser-dialog.ui-dialog--narrow  {
  max-width: 1200px;
}

@media screen and (max-width: 1199.99px) {
  .ckeditor5-entity-browser-dialog.ui-dialog--narrow  {
    min-width: 95%;
    max-width: 95%;
  }
}
✨ Feature request
Status

Fixed

Version

1.0

Component

Code

Created by

🇺🇸United States justcaldwell

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

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024