Contrib.social

Legend text overflow issue on small viewports due to absolute positioning

Open on Drupal.org →
Created on 26 January 2019, over 6 years ago
Updated 8 June 2025, about 2 months ago

Problem

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;
}

Proposed Solution

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;
}

🐛 Bug report
Status

Needs work

Version

1.0

Component

Code

Created by

🇨🇦Canada occupant Canada

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

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024