Problem/Motivation

The vertical-tabs component has been modernized in Olivero, which uses a flex-based layout. Other core theme implementations still use float-based positioning of the vertical tabs menu.

This difference can cause layout problems when inline field content is rendered inside a vertical-tabs pane. In affected implementations, the pane content appears pushed downward with an unexpected gap above it. Olivero does not show the same problem because its vertical-tabs layout handles the interaction correctly.

Starterkit-based themes can inherit this behavior because Starterkit relies on the Stable9 vertical-tabs styling. This is technically also an issue for Claro.

Steps to reproduce

  1. Set the UI Suite USWDS theme as default and turn off "Use the administration theme when editing or creating content".
  2. Enable the Field Group module.
  3. Add at least 4 field groups to the Basic page Default display mode, each set to "Display element also when empty".
  4. Add multiple fields to the first 2 field groups to be displayed.
  5. Create Basic Page content.
  6. Visit the Node.
  7. Observe the gap between the 1st field and the 2nd.

screenshot of the displaced fields in vertical tabs.

Proposed resolution

Modernize the vertical-tabs implementations to avoid float-based layout assumptions.

Remaining tasks

  • Confirm the minimal reproduction using only core theme implementations.
  • Update the relevant vertical-tabs CSS in core.
  • Test System, Stable9, Claro, and Starterkit-based output for regressions.

User interface changes

Content inside vertical-tabs panes will align correctly at the top in core theme implementations when inline field content is present.

Release notes snippet

Fixed a vertical-tabs layout issue in older core theme implementations where inline field content could cause pane content to be displaced downward

CommentFileSizeAuthor
#7 drupal-fix-inline-fields-vertical-tabs-gap-3583700-7.patch682 bytesjcandan
drupal-vertical-tabs-displaced.png25.67 KBjcandan

Issue fork drupal-3583700

Command icon Show commands

Start 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:

About issue forks

Comments

jcandan created an issue. See original summary.

jcandan’s picture

jcandan commented

May need to reword the issue summary.

  • UI Suite USWDS, currently based on stable9, but built on starterkit_theme, runs into this.
  • USWDS Base, with no base theme, uses core/misc/vertical-tabs.css, and has this issue too.
jcandan’s picture

jcandan commented
Version: 11.3.x-dev » 11.x-dev

jcandan opened merge request !15383

jcandan’s picture

jcandan commented

An interesting note: starterkit_theme does not ship a vertical-tabs.css. Perhaps it should.

jcandan changed the visibility of the branch 3583700-fix-vertical-tabs-inline-fields-gap to hidden.

jcandan’s picture

jcandan commented
StatusFileSize
new drupal-fix-inline-fields-vertical-tabs-gap-3583700-7.patch682 bytes
quietone’s picture

quietone commented
Version: 11.x-dev » main

Hi, Issues for Drupal core should be targeted to the 'main' branch, our primary development branch. Changes are made on the main branch first, and are then back ported as needed according to the Core change policies. The version the problem was discovered on should be stated in the issue summary Problem/Motivation section. Thanks.