gin-table-scroll-wrapper prevents nested paragraph buttons from being clickable

Created on 18 July 2023, 11 months ago
Updated 22 August 2023, 10 months ago

Problem/Motivation

After upgrading to RC5 I've found an issue where nested paragraphs add buttons at the bottom of a paragraph form are no longer clickable because they are being overlapped by invisible gin-table-scroll-wrapper div.

I believe this problem was introduced with the https://www.drupal.org/project/gin/issues/3344925 🐛 Sticky header for non views tables Fixed changes.

Removing the 240px bottom padding and 240px negative bottom margin CSS seems to fix the issue. I'm not sure of the original reason for these CSS properties being set, so I'm not sure if remove these would affect other things.

Steps to reproduce

  1. Add a paragraph field to a node with a few different paragraph types as well as a nested paragraphs.
  2. Set the paragraph's field form display to have the "Add mode" set to "Button" so individual add buttons are shown at the bottom of the field.
  3. Add a new node and try to add additional paragraphs with the bottom add buttons.
  4. The buttons should not be clickable and inspecting with the browser dev tools should show the nested paragraph's gin-table-scroll-wrapper div covering the buttons.

Proposed resolution

Remove the 240px bottom padding and 240px negative bottom margin CSS from the gin-table-scroll-wrapper element.

Remaining tasks

  1. Reproduce issue
  2. Agree on solution
  3. Implement solution

User interface changes

None

API changes

None

Data model changes

None

🐛 Bug report
Status

Fixed

Component

Code

Created by

🇺🇸United States PCate

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

Comments & Activities

Production build 0.69.0 2024