Contrib.social

Dialog min/maxHeight options are ignored in some cases

Open on Drupal.org →
Created on 23 March 2016, almost 9 years ago
Updated 7 August 2023, over 1 year ago

Problem/Motivation

Method resetSize() in dialog.position.js is responsible to reposition and resize jQuery UI dialog on dialog content loading and later on screen resize events, etc.

The problem is that some dialog implementations (like entity_browser → ) are only setting maxHeight parameter and not the height parameter, and in that combination resetSize() method with fail to set maxHeight on dialog because of missing height parameter.

If we take a look at jQuery UI dialog source _size() method on line 792 we will see that if height option is not set to auto then min/maxHeight options will be ignored.

Steps to reproduce

  1. Install and use Bootstrap theme and make sure modal is activated in the modal theme settings.
  2. Install and use Menu link attributes.
  3. Set up menu link attributes under /admin/config/menu_link_attributes/config. Example:
        attributes:
      class:
        label: 'Class'
        description: 'Add class attributes like use-ajax to enable modal functionality.'
      data-toggle:
        label: 'Data toggle'
        description: 'Use data-toggle in conjunction with data-target for your own custom modal (e.g.: modal modal-lg)'
      data-target:
        label: 'Data target'
        description: '#id for custom modal'
      data-dialog-type:
        label: 'Data dialog type'
        description: 'For default modal reference (e.g.: modal)'
  4. Add example link to main menu. Use the collapsed Attributes settings block to add class use-ajax and data-dialog-type modal to open a basic page content with text in it longer than the view port (e.g. a long About/Disclaimer or Lorem Ipsum).
  5. Go back to frontpage and click the link.
  6. Watch the modal breaking on the bottom. The modal should be scrollable and should wrap the complete text. But it only wraps until the bottom of the page. The rest of the text runs (overflowed) out of the modal.
  7. Check the source code (inspector etc) for the inner modal <div class="drupal-modal--content"> and recognize the inserted element inline style="max-height:<em>YOURVIEWPORTHEIGHT</em> px". Disabling it makes the modal behave like expected.

Tested in Firefox

Adding

div#drupal-modal--content[style] {
  max-height: none !important;
}

to the own theme CSS or LESS/SASS can be considered to be a temporary work-around.

Proposed resolution

Set the height to auto when height is not provided but min or max is.

Remaining tasks

Test coverage

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Javascript  →

Last updated about 4 hours ago

Created by

🇷🇸Serbia pivica

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

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.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024