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.

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

hudri created an issue. See original summary.

hudri’s picture

Issue summary: View changes

hudri’s picture

Assigned: hudri » Unassigned
Status: Active » Needs review
hudri’s picture

Issue summary: View changes
drumanuel’s picture

StatusFileSize
new1.67 KB

Made a patch for this based on 2.0.4

stephen-cox’s picture

I'm seeing this, although it maybe a different problem. Lots of text in a paragraph item pushes the save button off the bottom of the screen meaning it's not possible to save the page.

Patch #6 didn't fix this issue. The following CSS rule fixed it for me:

.layout-paragraphs-component-form .ck-editor__main > .ck-editor__editable {
  max-height: calc(100vh - 320px);
}
larskleiner’s picture

The #6 patch didn't work for me so I 'm trying a different approach.

The viewport height gets reduced by 200px if the modal from is too long. This forces a vertical scrollbar onto the .ui-dialog-content element.

This is just a quick fix that needs to be refined as the function name is still called repositionDialog.

naveenvalecha’s picture

Version: 2.0.4 » 2.0.x-dev
Status: Needs review » Reviewed & tested by the community

Thank you for the patch. We are using #note-8 patch on a big customer website for a long time and its working fine for us.
RTBC +1
Looking forward to get this in soon :)

naveenvalecha’s picture

Here's the patch for 2.0.5

naveenvalecha changed the visibility of the branch 3417765-large-modal-exceeds to hidden.

naveenvalecha changed the visibility of the branch 3417765-large-modal-exceeds to active.

mistrytheory’s picture

I've added an additional patch, based on naveenvalecha's patch on #10. This adds the style `overscroll-behavior: contain` to stop the scroll of the body, when scrolling within the dialog.

sethhill made their first commit to this issue’s fork.

sethhill’s picture

Status: Reviewed & tested by the community » Fixed

  • sethhill committed b9e30094 on 2.0.x authored by hudri
    Issue #3417765 by hudri, naveenvalecha, sethhill, Drumanuel, larskleiner...
sethhill’s picture

Status: Fixed » Closed (fixed)