The text in legends contained within fieldsets has an overflow issue when the line wraps. The current CSS anticipates a single line of text, but this is not always the case.
The css that causes the issue is in form.css, specifically the position:absolute; rule:
fieldset:not(.fieldgroup) > legend {
font-size: 1em;
font-weight: bold;
letter-spacing: 0.08em;
position: absolute;
text-transform: uppercase;
top: 10px;
}
Remove the absolute position, and adjust the styles to flow within the fieldset.
fieldset:not(.fieldgroup) {
background-color: #fcfcfa;
border-radius: 2px;
margin: 1em 0;
padding: 18px; /* was 30px 18px 18px */
min-width: 0;
position: relative;
}
fieldset:not(.fieldgroup) > legend {
font-size: 1em;
font-weight: bold;
letter-spacing: 0.08em;
position: relative; /* was absolute */
text-transform: uppercase;
/* top: 10px; */
/* additional styles */
float: left; /* to override default browser styles */
width: 100%; /* to prevent actual float behaviour */
padding-bottom: 1em;
}
Show commandsStart 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:
changes
Comments
Comment #2
occupantAdding patch
Comment #3
joelpittetSetting as NR
Comment #4
joelpittetThis works great!
I checked it with webform too and with RTL because of the width: 100% it works with that too.
Comment #5
lauriiiI'm wondering if we actually need this change? This seems to make a minor change to the design even for single line legend.
Comment #10
sulfikar_s commentedI've rerolled the patch. Please review
Comment #12
bhumikavarshney commentedHi @sulfikar_s,
The above patch works fine for me.
Thanks
RTBC+1
Comment #13
longwaveFollowing #3304285: Remove Seven from core I confirmed that this CSS is only present in Seven and no other core themes, so moving this to the contributed Seven project.
Comment #14
avpadernoComment #17
immaculatexavier commentedComment #18
avpadernoI checked on the live preview: The merge request fixes the reported issue.
Comment #21
avpadernoThank you! The changes have been applied to both the branches.
Comment #22
avpadernoComment #24
joevagyok commentedThis issue introduced a regression on vertical tabs form when element is in place over the fieldsets over 2.0.x.
Comment #25
avpadernoComment #26
avpadernoDoes it happen for other fieldsets?
Comment #27
joevagyok commentedYes, wherever we use the same combination it's broken, only tested on 2.0.x. We did a temp fix on our side as such:
Comment #28
avpadernoMay you verify if it happens also with the 2.0.x-dev development version? After #3546625: Remove the prefix added to the details class in the details.html.twig file, some of the pages are rendered differently.
Which module adds the Navigation block vertical tab?
Comment #29
avpadernoComment #30
joevagyok commentedThe
<legend>Behaviour as parent</legend>inside the Navigation block is coming from our own module. It's an optional element for the fieldset, and a combination that is being used elsewhere as well. Presence of a<legend>should not cause this issue. In 1.x this was working perfectly, before this change was introduced. I can confirm the issue is present in both 2.0.x and 1.0.x branches.Comment #32
avpadernoComment #33
avpadernoOn the merge request !221, I reverted the changes done in this issue.
Comment #35
avpadernoI am no longer sure that what reported here is an issue that can practically occur in any Drupal core or contributed modules' page.
The legend text used inside field-sets is supposedly a short text of three-four words (Available menus, Preview before submitting, Toolbar configuration). In some rare cases, the legend can be a full sentence (Who can register accounts?) or contain more than four words ( When cancelling a user account, Time zone for new users).
I agree, we need to consider that the translation of those strings can be longer than the English text, but the changes in CSS styles must be not so disruptive to cause what shown in the screenshot in #24.
@joevagyok May you show the full markup? It would help to see the full content of the
<fieldset>shown in the screenshot.Comment #36
avpadernoThe issue fork merged in this issue changes the styles for fieldsets whose class is not fieldgroup. The fieldsets used in vertical tabs in /admin/structure/types/manage/article have that class, like the Preview before submitting fieldset.
Comment #37
avpadernoI changed the fieldset styles to avoid using
position: relativeandposition: absolute.Comment #38
kmitch commentedHi,
Thanks for everybody's work on this issue! I ran across this issue when I installed v2.0.0-beta2 (preparing for Drupal 11), and wanted to note that the June 2025 commits on this issue (
MR!99) ended up getting into the v2.0.0-beta2 branch/tag, resulting in the regressions noted by @joevagyok . Unfortunately, the later commits on this issue (MR!221) do not appear in v2.0.0-beta2, so we've had to apply MR!221 as a patch in composer to resolve the regression.One issue we noticed with
MR!221, at least with the most recent commit (8523a326) that removes the positioning rules altgother, is that the legends for fieldsets now appear differently than they did prior to all of the adjustments: the legends now appear along the fieldset's top border rather than just below the top border. I have attached two screenshots showing before and after views (before uses onlyMR!221 commit a34616df, while after uses the latest version ofMR!221).Given that all of the changes from this issue appear to be moot (re comment #35 above), I would probably vote for keeping the fieldset legends the way they were (as in sticking with
MR!221 commit a34616df). But I will defer to you all if that seems like the best course of action.Either way, thanks for everyone's work on this!
-- Ken
Comment #41
avpadernoThe merge request !221 was a test to see what happened when removing the
positionstyle. Some of those styles are for preventing regression due to fieldset styling that was removed in normalize.css; any change in those styles could cause regression, so they should be carefully checked.I reverted the changes done in this issue. Thanks everybody!