Contrib.social

Margin setting on horizontal tabs causes overlap with tab list

Open on Drupal.org →
Created on 16 July 2024, 7 months ago
Updated 26 August 2024, 5 months ago

Problem/Motivation

On our node edit pages we make heavy use of horizontal tabs (via the Field Group module) to organize fields. I'm not sure if this affects anyone else, but I wanted to report a bug we've noticed that I'm finally getting around to looking into. It appears that Gin's margin property in tabs.css, specifically .horizontal-tabs .horizontal-tabs-pane > .details-wrapper, overrides Claro's margin, which is what's causing the bug our team noticed.

Note: I linked this issue to 3292039 - Separate out tab theming into tabs.css → because that appears to be where the margin was added.

Steps to reproduce

  1. Create a content type
  2. Create a paragraph type
  3. Add several fields to the paragraph
  4. On the paragraph's form display settings, organize the fields into tabs
  5. Add a paragraph field to the content type. Add the paragraph type you created in step 2 to its allowed paragraph types.
  6. Create a new node of the content type you created, and add a paragraph to the paragraph field you created.
  7. The tabs should look approximately like the attached screenshot.

Proposed resolution

I'll open a merge request to remove the margin property from the tabs CSS and SCSS files.

Remaining tasks

Commit

User interface changes

Before -

After -

Introduced terminology

NA

API changes

NA

Data model changes

NA

Release notes snippet

NA

🐛 Bug report
Status

Fixed

Version

3.0

Component

Code

Created by

🇺🇸United States jsutta United States

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

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024