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.
Issue fork layout_paragraphs-3417765
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
Comment #2
hudriComment #4
hudriComment #5
hudriComment #6
drumanuel commentedMade a patch for this based on 2.0.4
Comment #7
stephen-cox commentedI'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:
Comment #8
larskleiner commentedThe #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-contentelement.This is just a quick fix that needs to be refined as the function name is still called
repositionDialog.Comment #9
naveenvalechaThank 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 :)
Comment #10
naveenvalechaHere's the patch for 2.0.5
Comment #13
mistrytheory commentedI'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.
Comment #15
sethhill commentedComment #17
sethhill commented