Active
Project:
Drupal core
Version:
main
Component:
forms system
Priority:
Normal
Category:
Task
Assigned:
Unassigned
Reporter:
Created:
1 Mar 2025 at 12:55 UTC
Updated:
18 Mar 2025 at 22:24 UTC
Jump to comment: Most recent
Problem/Motivation
The fieldset element can be used to indent a conditional field ("sub-field"), see for example the Twig debug form:
(from #3278493: Make it easier for theme builders to enable Twig debugging and disable render cache)
... so it feels like a sub-element, lower in the hierarchy, even if that was never the intended use.
The question is, what is the best method to indent a form element to the right, to visualize the hierarchy, and signify that this element is at a lower level?
Proposed resolution
Maybe we should consider adding styling to dependent fields and similar fields at a lower levels, and indent them to the right, to signify their hierarchical position?
---
Originally posted as a Claro Compact issue:
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
- Visit /admin/config/development/settings
- Click "Twig development mode"
- 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.
Remaining tasks
User interface changes
API changes
Data model changes
| Comment | File | Size | Author |
|---|---|---|---|
| 1.2-Claro-comp-fieldset-lacks-indentation.png | 57.19 KB | ressa | |
| 1.1-Claro-fieldset-good-indentation.png | 58.79 KB | ressa |
Comments
Comment #2
ressaComment #3
ressaComment #4
ressaComment #5
djg_tram commentedI'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 fieldset is, in fact, a dependent fieldset that opens up when the upper checkbox is checked. But this is not a general attribute or use case 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.
Comment #6
ressaThanks for a fast reply, I guess the
fieldsetelement 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.Comment #7
ressaComment #8
djg_tram commentedI would, frankly, expect Devel to style their form to indent the dependent fieldset in this particular case.
Comment #9
ressaI 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?
Comment #10
djg_tram commentedI 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.
Comment #11
ressaThanks for investigating, maybe we need a new element, to indicate hierarchy?
Comment #12
djg_tram commentedI 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-Nwould be beneficial.Comment #13
quietone commentedChanges are made on on 11.x (our main development branch) first, and are then back ported as needed according to the Core change policies.