Skip to content

fix(table): fix toggle vertical alignment in thead#7701

Closed
evwilkin wants to merge 4 commits intopatternfly:mainfrom
evwilkin:chore/7699-thead-toggle-alignment
Closed

fix(table): fix toggle vertical alignment in thead#7701
evwilkin wants to merge 4 commits intopatternfly:mainfrom
evwilkin:chore/7699-thead-toggle-alignment

Conversation

@evwilkin
Copy link
Member

@evwilkin evwilkin commented Jul 30, 2025 •
edited
Loading

Closes #7699

This PR fixes alignment issues between the expandable toggle button, selectable checkbox, and column headers in the table thead that affect both expandable tables and expandable & compact tables.

It adds 2 new variables to set vertical alignment, both default to the existing value of bottom and both are changed to middle to resolve alignment bugs:

  1. --#{$table}__thead--VerticalAlign: bottom
    • Updated to middle on expandable tables.
  2. --#{$table}__thead__check--VerticalAlign: bottom
    • Updated to middle on tables that are both expandable & compact.

@patternfly-build
Copy link
Collaborator

patternfly-build commented Jul 30, 2025 •
edited
Loading

Preview: https://pf-pr-7701.surge.sh

A11y report: https://pf-pr-7701-a11y.surge.sh

@evwilkin evwilkin requested review from mattnolting and mcoker July 30, 2025 15:57
@evwilkin
Copy link
Member Author

evwilkin commented Aug 4, 2025

From @mattnolting

The issue with the approach is that when th content is set to pf-m-wrap and th content starts wrapping, the expand button then is misaligned.
Here's what's happening. Button (pf-v6-button ) and table button (pf-v6-c-table__button) are different heights and the icons within them are different sizes. That's creating the misalignment. They also have different padding settings, complicating the misalignment. If they were the same height (created by line height + font size), they would align properly.
#7050 (comment)
I attempted to fix it here, though I do believe that this could be simplified. In this comment, you can see the issue - essentially the row height varies because of its contents and causes layout issues as a result.
The misalignment is because table header cell text is smaller than standard table data cell text, but the icon and button sizes are mixed.

@mcoker mcoker changed the title chore(table): fix toggle vertical alignment in thead fix(table): fix toggle vertical alignment in thead Aug 4, 2025
@mcoker
Copy link
Contributor

mcoker commented Aug 5, 2025

Closing in favor of #7722

@mcoker mcoker closed this Aug 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mcoker mcoker Awaiting requested review from mcoker

@mattnolting mattnolting Awaiting requested review from mattnolting

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Bug - Table (expandable) - toggle misalignment in THead

3 participants

@evwilkin @patternfly-build @mcoker