Problem/Motivation

Tables inside paragraphs are resized incorrectly.
Image Table inside paragraph
The issue has been introduced by https://www.drupal.org/project/gin/issues/3348101
It uses a CSS selector which catches all the tables, not only the wrapper ones intended to be fixed by #3348101
.paragraphs-tabs-wrapper .field-multiple-table .draggable

Steps to reproduce

  1. Create a Paragraph
  2. Add an image field allowing multiple values
  3. Set the form display for the field to Entity Browser

Proposed resolution

The solution is to use a stricter selector
.paragraphs-tabs-wrapper .field-multiple-table > tbody > .draggable
Proposed patch

The same issue is replicable on version 4.x

CommentFileSizeAuthor
#21 3522015-21-5.x.patch4.5 KBcasey
#15 Screenshot from 2025-05-09 12-20-07.png145.89 KBsandip
#15 Screenshot from 2025-05-09 12-19-23.png127.13 KBsandip
#12 3522015-gin-fix-from-mr-611.patch9.08 KBgiannis makantasis
#7 Screenshot from 2025-05-02 11-26-20.png45.93 KBsandip
#7 Screenshot from 2025-05-02 11-25-50.png47.1 KBsandip
image-table-paragraph.png37.48 KBmarco.pagliarulo

Issue fork gin-3522015

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:

About issue forks

Comments

marco.pagliarulo created an issue. See original summary.

marco.pagliarulo’s picture

marco.pagliarulo commented
Title: Paragraph » Paragraph table shrink
marco.pagliarulo’s picture

marco.pagliarulo commented
Issue summary: View changes

marco.pagliarulo opened merge request !611

marco.pagliarulo’s picture

marco.pagliarulo commented
marco.pagliarulo’s picture

marco.pagliarulo commented
Issue summary: View changes
sandip’s picture

sandip commented
StatusFileSize
new Screenshot from 2025-05-02 11-25-50.png47.1 KB
new Screenshot from 2025-05-02 11-26-20.png45.93 KB

Hi @marco.pagliarulo, thanks for the MR it resolves the issue properly and it also fix another issue for overflowing paragraph fields attaching SS for refernce.

sandip’s picture

sandip commented
Status: Active » Reviewed & tested by the community

Moving this issue to RTBC as there is no regression with this MR and it resolves this issue properly.

piridium’s picture

piridium commented
Related issues: +#3493765: Widget for multivalued file field overlaps (3.x)

Tested here as well and confirmed working nicely. MR611 also resolves the file widget overlap mentioned in the related issue.

piridium’s picture

piridium commented

Also, if you add the following to _tabledrag.scss, the vertical alignment would be perfect:

At line 2:

.draggable {
  vertical-align: middle;
  ...

And at the very end:

.table-file-multiple-widget .tabledrag-cell-content {
  display: flex;
  align-items: center;
}

I tried it locally, but I can’t push the changes to the issue fork. (?)
remote: You are not allowed to push code to this project.

sandip’s picture

sandip commented

@piridium, please click on the Get Push Access button beside the fork. So you can push your changes.

giannis makantasis’s picture

giannis makantasis commented
StatusFileSize
new 3522015-gin-fix-from-mr-611.patch9.08 KB

Also tested MR 611 and it seems to work fine . For anyone using Composer and cweagans/composer-patches, here's a patch file based on MR !611 for easy use. This helps if you're waiting for the MR to be merged.

piridium’s picture

piridium commented
Status: Reviewed & tested by the community » Needs review

@sandip You saved me once again — that was exactly the problem. I’ve now added a small adjustment for the drag handles. Could I ask you to test it again?

sandip’s picture

sandip commented
Assigned: Unassigned » sandip

Yeah sure @piridium i am reviewing this one.

sandip’s picture

sandip commented
Assigned: sandip » Unassigned
StatusFileSize
new Screenshot from 2025-05-09 12-19-23.png127.13 KB
new Screenshot from 2025-05-09 12-20-07.png145.89 KB

Hi @@piridium, i observed in /add page it is looking good but in /edit page drag button is not in center.

marco.pagliarulo’s picture

marco.pagliarulo commented

Hi @sandip, the Tabledrag js was missing a class for the tabledrag handle inside the template. That prevented to move the handle outside the draggable item, so the css selector did not match. I pushed the fix. Please test it again

sandip opened merge request !722

sandip opened merge request !723

sandip’s picture

sandip commented
Version: 8.x-3.x-dev » 4.1.x-dev
Status: Needs review » Reviewed & tested by the community

Thanks @marco.pagliarulo for the solution it Fixed the align issue in Edit node page also. I have raised MR for both 4.1.x and 5.0.x since the issue exists there as well and it needs to be fixed in those branches too. I am moving this issue to RTBC. I have already added before and after images in #7 so i am not adding images again.

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

casey’s picture

casey commented
Version: 4.1.x-dev » 5.0.x-dev
StatusFileSize
new 3522015-21-5.x.patch4.5 KB

We are using the patch from #12. The patch no longer applies since #3515484: Nested paragraph with inline form widget and draggable breaks the table. Not sure if this issue have been fixed now.

I have rebased the MR for gin 5.x.

Attached is a snapshot of the latest state of the MR for safe usage with composer patches.

casey’s picture

casey commented
Related issues: +#3515484: Nested paragraph with inline form widget and draggable breaks the table
marco.pagliarulo’s picture

marco.pagliarulo commented

The MR for Gin 4.1.x is update to take in count the changes already applied for #3515484.

I'll work asap to review the MR for Gin 5

marco.pagliarulo’s picture

marco.pagliarulo commented
Assigned: Unassigned » marco.pagliarulo
marco.pagliarulo’s picture

marco.pagliarulo commented
Assigned: marco.pagliarulo » Unassigned

In base on my tests now all 3 MRs are fine and solving the problem. Would be nice to get a final review and merged if appropriate

saschaeggi’s picture

saschaeggi
he/him
commented
Status: Reviewed & tested by the community » Needs review