Problem/Motivation

The Paragraphs form widget in the Add/Edit Entity form has the wrong vertical positioning of the elements:
- The field name
- The drag&drop icon

The elements should be vertically centered, see the screenshot:
Screenshot

Steps to reproduce

Proposed resolution

Would be good to fix CSS to position these elements to the vertical center.

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#8 paragraphs-3514005-fix-vertical-centering-form-widget-1.patch1.81 KBmurz
#7 para.png108 KBarunsahijpal
#6 ksnip_20250321-134319.png116.92 KBmurz
#6 ksnip_20250321-134122.png43.42 KBmurz
#6 ksnip_20250321-133207.png110.65 KBmurz
#5 ksnip_20250321-121126.png39.34 KBmurz
ksnip_20250319-162200.png40.19 KBmurz

Issue fork paragraphs-3514005

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

murz created an issue. See original summary.

murz’s picture

murz
Primary language English
Location Yerevan, Armenia
commented
Issue summary: View changes
arunsahijpal’s picture

arunsahijpal commented
Assigned: Unassigned » arunsahijpal

Working on it.

murz opened merge request !182

murz’s picture

murz
Primary language English
Location Yerevan, Armenia
commented
Status: Active » Needs review
StatusFileSize
new ksnip_20250321-121126.png39.34 KB

Seems I found the right solution to fix this, pushed changes to the MR https://git.drupalcode.org/project/paragraphs/-/merge_requests/182 - now it looks like this:
Screenshot
Please review.

murz’s picture

murz
Primary language English
Location Yerevan, Armenia
commented
StatusFileSize
new ksnip_20250321-133207.png110.65 KB
new ksnip_20250321-134122.png43.42 KB
new ksnip_20250321-134319.png116.92 KB

And got one more problem with the drag&drop icon - if in the Paragraphs Field Widget set the "Edit mode = Closed", then - the visible icon jumps down, here is a problem:
Screenshot

We have a CSS that sets the height of the "div.handle" for some reason:

.js .field--widget-paragraphs .tabledrag-handle .handle {
  height: 22px;
  margin-left: 0;
  margin-right: 0;
}

But I checked on the default draggable widget for the String field - and there it has zero size:
Screenshot

So, seems the Paragraph styling for it is redundant. I removed it in the last commit, and it fixes the issue:
Screenshot

Updated the MR

arunsahijpal’s picture

arunsahijpal commented
Assigned: arunsahijpal » Unassigned
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new para.png108 KB

Hi @murz
The paragraph is center alligned now so moving it to RTBC.

murz’s picture

murz
Primary language English
Location Yerevan, Armenia
commented
Status: Reviewed & tested by the community » Needs review
StatusFileSize
new paragraphs-3514005-fix-vertical-centering-form-widget-1.patch1.81 KB

Attach a static patch file with those changes, to make it possible to use in composer until #3204538: GitLab Merge Requests Unable to Generate Incremental Patch Files is resolved.

murz’s picture

murz
Primary language English
Location Yerevan, Armenia
commented
Status: Needs review » Reviewed & tested by the community

Reverting back the status