Fieldsets lack indentation

Created on 1 March 2025, 9 days ago

Problem/Motivation

Fieldset texts are too far to the left, and need to be moved to the right, to align with the element above.

Steps to reproduce

  1. Visit /admin/config/development/settings
  2. Click "Twig development mode"
  3. See that the header in the opened fieldset ("Twig development mode") is not indented enough, and doesn't align with the elements above

Claro

Fieldset texts are correctly aligned in Claro.

Claro Compact

Fieldset texts are too far to the left in Claro Compact.

Proposed resolution

Remaining tasks

Update the CSS, would these changes work?

/* style.css | /themes/contrib/claro_compact/css/style.css */

.fieldset__label {
  /* padding: 0; */
  padding-top: 0;
}

.fieldset__wrapper {
  /* padding: 0; */
  /* margin: 0; */
}

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

2.0

Component

Code

Created by

🇩🇰Denmark ressa Copenhagen

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

Comments & Activities

  • Issue created by @ressa
  • 🇩🇰Denmark ressa Copenhagen
  • 🇩🇰Denmark ressa Copenhagen
  • 🇩🇰Denmark ressa Copenhagen
  • 🇭🇺Hungary djg_tram

    I'm not sure why this would be a problem: the primary purpose is to remove extra space.

    You seem to mix two things here. This specific toolset is, in fact, a dependent fieldset that opens up when the upper checkbox is checked. But this is not a general attributes of fieldsets, this is something specific to this Devel form. If we changed all fieldsets the way you suggest, they would become larger anywhere in the UI, not just in this dependent position.

  • 🇩🇰Denmark ressa Copenhagen

    Thanks for a fast reply, I guess the fieldset element as a side effect of the border and text indentation acts a hierarchy signifier. I'll move the issue to Drupal core, to clarify how to best indicate hierarchy between form elements.

  • 🇩🇰Denmark ressa Copenhagen
  • 🇭🇺Hungary djg_tram

    I would, frankly, expect Devel to style their form to indent the dependent fieldset in this particular case.

  • 🇩🇰Denmark ressa Copenhagen

    I think it would be better to find a universal solution, for cases such as this. Maybe we can add styling to dependent fields and similar "sub-fields", to indent them?

  • 🇭🇺Hungary djg_tram

    I can't find anything in the classes that would help us tell apart this case, so it would be a task for the core to add something that we can rely on.

  • 🇩🇰Denmark ressa Copenhagen

    Thanks for investigating, maybe we need a new element, to indicate hierarchy?

  • 🇭🇺Hungary djg_tram

    I never looked into the code that generates these form elements, so I really don't know. This is just a shot in the dark, but maybe a class of form-indent-level-N would be beneficial.

Production build 0.71.5 2024