Contrib.social

Link field description squashes the field

Open on Drupal.org →
Created on 18 April 2025, about 2 months ago

Problem/Motivation

The description of a link field is displayed next to the the field itself, thereby reducing the length of the field so much that it's difficult for a user to see what they have field in there.
This is even worse if only internal links are allowed.

This seems to be caused by
td > .form-item {display: flex;} in table.css line 178

Steps to reproduce

  • Add a link field to a content type
  • Create content of this type

Proposed resolution

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Active

Version

11.0 🔥

Component

Claro theme

Created by

🇳🇱Netherlands ifrik

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

Merge Requests

Comments & Activities

  • Issue created by @ifrik
  • Comment 23 days ago →
    🇮🇳India sd9121

    I am looking into this issue.

  • Merge request !12124Resolve 3519949: Link field description squashes the field. → (Open) created by Unnamed author
  • Pipeline finished with Failed
    23 days ago
    Total: 440s
    #497168
  • Pipeline finished with Success
    23 days ago
    Total: 407s
    #497178
  • Comment 23 days ago →
    🇮🇳India sd9121

    I have addressed this issue and tested related pages to ensure there are no regressions.
    Please review the changes and share any feedback.
    Thanks!

  • Comment 22 days ago →
    🇮🇳India Tirupati_Singh

    Hi @sd9121, I followed the steps to reproduce the issue and can confirm that it still persists. When adding a link field, the URL field gets squished due to the description taking up too much horizontal space. This is also affecting the layout of fields for the link title and text.

    I applied the MR provided as a patch, and it applied without any errors. After applying the patch, the URL field's description was moved below the URL, which resolves the design issue and prevents it from breaking the layout.

    For reference, I’ve attached screenshots showing the issue before and after the fix.

    However, in the latest version of Drupal 11, this issue doesn’t occur, since the CSS rule td > .form-item { display: flex; } has been removed from tables.css. In Drupal 11, the .form-item now renders as a block element, which resolves the issue naturally.

    Moving the status to RTBC as the changes are working fine and will fix the issue for older versions as well.

    Thanks!

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024