Problem/Motivation

On the Gin theme, the reference field to a paragraph type is hiding the title in the form display, making it halfway cutoff.
This is due to the overflow: hidden styling in the CSS.

Steps to reproduce

Add a reference type to a paragraph container in a content type, then add a paragraph type in that container.
Add a content node with that container and a paragraph content inside --> the paragraph title is cutoff.

Proposed resolution

Remove the overflow:hidden styling in the paragraph.admin.css on
".js .paragraph-type-title" class

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#14 paragraph-title-flex-grow-3312044.patch760 bytesp-neyens
#6 Screenshot.PNG24.6 KBgaurav-mathur
#2 3312044-paragraph-title-hidden.patch318 bytesginovski
image-paragraphs-type.png67.44 KBginovski
award-paragraphs-type.png34.01 KBginovski

Issue fork paragraphs-3312044

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

Ginovski created an issue. See original summary.

ginovski’s picture

ginovski commented
StatusFileSize
new 3312044-paragraph-title-hidden.patch318 bytes

Added a CSS fix.

ginovski’s picture

ginovski commented
Assigned: Unassigned » ginovski
Issue summary: View changes
Status: Active » Needs review
berdir’s picture

berdir
Primary language German
Location Switzerland
commented

Just removing that is likely going to cause problems with longer paragraph type labels. Try a long label on claro for example, combined with collapsed paragraphs and showing a summary.

gaurav-mathur’s picture

gaurav-mathur commented
Assigned: ginovski » gaurav-mathur
gaurav-mathur’s picture

gaurav-mathur commented
Assigned: gaurav-mathur » Unassigned
StatusFileSize
new Screenshot.PNG24.6 KB

I have checked the issue without applying patch.I am not able to get the issue.
I am using this drupal 10.0.x-dev version.
Refer to screenshots.

sgostanyan’s picture

sgostanyan commented
Version: 8.x-1.x-dev » 8.x-1.18
Status: Needs review » Reviewed & tested by the community

Got the same issue with Claro (10.3.9). Patch #2 fixed the issue.

karengrey’s picture

karengrey commented

Patch #2 worked for me too, using Claro (10.4.5)

berdir’s picture

berdir
Primary language German
Location Switzerland
commented
Status: Reviewed & tested by the community » Needs work

Contributions need to be merge requests, even for a CSS change.

This only applies to the legacy widget, which I have no plans to change. Improving the stable widget would be more useful.

p-neyens changed the visibility of the branch 3312044-paragraph-title-overflow to hidden.

p-neyens changed the visibility of the branch 3312044-paragraph-title-overflow to active.

p-neyens changed the visibility of the branch 8.x-1.x to hidden.

p-neyens opened merge request !252

p-neyens’s picture

p-neyens commented
StatusFileSize
new paragraph-title-flex-grow-3312044.patch760 bytes

Provided a different approach instead of just removing the hidden overflow. Since we have plenty of space for the title, I think we can make it expand using flex. So i created a new branch and provided a PR.

So i created a new branch with the latest code of the 8.x branch (this to have the changes from https://www.drupal.org/project/paragraphs/issues/3562226)

I also created a patch related to version 8.x-1.17 which we use in or project. The idea is to upgrade within short period.