Bug - FormFieldGroupExpandable - Horizontal line overlap, when no header is defined.

Describe the problem
This is an issue with

Patternfly 5
Patternfly 6
other

This is a CSS layout bug in PatternFly's FormFieldGroupExpandable component. When the optional header is not provided, the expand/collapse toggle icon overlaps with the component's top border.

The issue stems from how the component handles the absence of a header. The CSS styling appears to rely on the header's presence to create the necessary vertical space for the toggle icon (the caret >). When the header is omitted, this space collapses, causing the icon to be misaligned and render directly on top of the horizontal line.

How do you reproduce the problem?
https://codesandbox.io/p/devbox/boring-germain-98h679?workspaceId=ws_M4PEkPeCW7FD8LFeSHjZJQ

Expected behavior
The expand/collapse toggle icon should be vertically aligned and have sufficient padding to ensure it does not overlap with the component's top border. This alignment should be maintained even when the optional header prop is not provided, ensuring the component renders gracefully in all its valid configurations.

Is this issue blocking you?
No, this is a visual bug and does not block functionality.

Screenshots

(no header)

(just action button)

What is your environment?
This issue is likely independent of the environment and appears to be a component styling bug.

OS: macOS

Browser: Chrome

Version: Latest versions

What is your product and what release date are you targeting?
N/A
Any other information?
N/A

Jira Issue: PF-4528

@andrew-ronaldson

cc @andrew-ronaldson, from the field groups design guidelines:

PatternFly field groups support a required title, description, and actions.

Can you or someone on the design side confirm this is the case or do we want to support the layout above with no title/description for an expandable field group? Looks like the title and description props are not required in react, and I'm wondering if they should be.

I think the title at least should be required and Description could be optional. Side note: The field builder component group is the pattern we typically recommend for key value pairs. It should be on the main PF site any day now

This issue has been automatically marked as stale because it has not had activity in the last 60 days.

Just dropping a note, this issue is likely to be moved to React and addressed as a doc update.

🔗 Related PRs

#12374 - feat(ToggleGroup): added full width variant [merged]
#12444 - feat(NavExpandable): allow option to pass an icon [merged]
#12554 - fix: update tree pattern expand icon direction [merged]

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

Create Plan

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

Navigation Menu

Repository navigation

Bug - FormFieldGroupExpandable - Horizontal line overlap, when no header is defined. #12611

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Bug - FormFieldGroupExpandable - Horizontal line overlap, when no header is defined. #12611

Description

Activity

mcoker commented on Oct 14, 2025

andrew-ronaldson commented on Oct 14, 2025

github-actions commented on Dec 17, 2025

github-actions commented on Jul 19, 2026

jcmill commented on Aug 4, 2026

coderabbitai commented on Aug 4, 2026

github-actions commented on Oct 11, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions