Large modal exceeds viewport height without scrollbar = actions unreachable

Created on 29 January 2024, 10 months ago
Updated 26 July 2024, 4 months ago

Problem/Motivation

This is a follow-up of #3252978

In some situations, the paragraphs modal may behave unexpected and exceeds the viewport height without adding a scrollbar. So it's impossible to save the paragraph.

Contrary to the linked issue, this one is harder to reproduce:

When the modal form is larger than the viewport, AND the modal form has Ajax or client-side rendered/manipulated elements (e.g. a CKeditor textfield or a form modified with field group module), then in some cases the height of the modal is not detected properly. In these cases the dialog content div.lbp-dialog > .ui-dialog-content has an CSS inline style max-height: none;. In this situation, the LP routine correctly detects that the form ends below the screen, and tries to reposition the dialog. This is observable in the browser's dev console, constantly writing top: ....px style updates into the DOM element. But the repositioning does not resize / remove the no-max-height setting, and loops indefinetely without ever fixing the missing scrollbar.

Notice that the behavior seems to be caused by a race-condition during load and is not fully reproducable. Exactly the same form might with exactly the same content might correctly show after a reload. But in my cases it only occured with dynamic content, never had any issue with static form content.

Proposed resolution

Detect if max-height: none is set. If yes, additionally trigger the dialog's resize routine.

🐛 Bug report
Status

Fixed

Version

2.0

Component

User interface

Created by

🇦🇹Austria hudri Austria

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

Merge Requests

Comments & Activities

Production build 0.71.5 2024