Problem/Motivation

The active horizontal tab has different padding applied causing misalignment

Active tab:

Other tab:

Steps to reproduce

Use horizontal field group + gin theme

Proposed resolution

Make the tabs have consistent padding

Remaining tasks

Merge request

User interface changes

Horizontal active tab and non-active tabs will align

API changes

N/A

Data model changes

N/A

CommentFileSizeAuthor
#13 2025-05-03_06-40.png12.67 KBscott_euser
#10 3462300-field_group-10.patch448 byteskiseleva.t
#9 horizontal-tabs-gin.gif1.16 MBscott_euser
#5 Screen Shot 2024-07-30 at 12.13.21 PM.png48.65 KBpilot3
#5 Screen Shot 2024-07-30 at 12.13.14 PM.png53.37 KBpilot3
#4 fixed.png13.93 KBscott_euser
#2 other-tab.png12.45 KBscott_euser
#2 active-tab.png19.44 KBscott_euser

Issue fork field_group-3462300

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

scott_euser created an issue. See original summary.

scott_euser’s picture

scott_euser commented
Issue summary: View changes
StatusFileSize
new active-tab.png19.44 KB
new other-tab.png12.45 KB

scott_euser opened merge request !60

scott_euser’s picture

scott_euser commented
Status: Active » Needs review
StatusFileSize
new fixed.png13.93 KB

After fix:

pilot3’s picture

pilot3 commented
StatusFileSize
new Screen Shot 2024-07-30 at 12.13.14 PM.png53.37 KB
new Screen Shot 2024-07-30 at 12.13.21 PM.png48.65 KB

I want to review this, but I don't see the same problem on my site. I use Gin as admin theme and had field group module set horizontal.

scott_euser’s picture

scott_euser commented

It's within a Paragraph type in my example, perhaps that causes the issue

scott_euser’s picture

scott_euser commented

I can check and compare tomorrow and get back to you

scott_euser’s picture

scott_euser commented
Status: Needs review » Closed (outdated)

Hmmm can't reproduce any more. Must have been fixed elsewhere!

scott_euser’s picture

scott_euser commented
Status: Closed (outdated) » Needs review
StatusFileSize
new horizontal-tabs-gin.gif1.16 MB

Actually yep this still exists:

Screencast toggling on and off the padding on tab

kiseleva.t’s picture

kiseleva.t commented
StatusFileSize
new 3462300-field_group-10.patch448 bytes

Exported MR into patch to use in composer.

grevil’s picture

grevil commented
Version: 8.x-3.x-dev » 4.x-dev
grevil’s picture

grevil commented
Status: Needs review » Postponed (maintainer needs more info)

Is this still reproducible in latest 4.x dev?

scott_euser’s picture

scott_euser commented
Status: Postponed (maintainer needs more info) » Needs review
StatusFileSize
new 2025-05-03_06-40.png12.67 KB

Screenshot of the tabs still being misaligned

Yep still an issue in 4.x unfortunately. MR still solves.

karengrey’s picture

karengrey commented
Status: Needs review » Reviewed & tested by the community

Can confirm CSS change fixes the issue
tested same scenario using paragraphs.

anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented
Status: Reviewed & tested by the community » Fixed

Thanks for the fixes here @all

  • anybody committed f163018d on 4.x authored by scott_euser 
    Issue #3462300 by scott_euser, kiseleva.t, pilot3, grevil, karengrey:...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.