Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Alignment of checkboxes in data table with selection misaligned in Firefox #11742

Closed
2 tasks done
emyarod opened this issue Apr 24, 2024 · 0 comments · Fixed by #11743
Closed
2 tasks done

Alignment of checkboxes in data table with selection misaligned in Firefox #11742

emyarod opened this issue Apr 24, 2024 · 0 comments · Fixed by #11743
Assignees
@emyarod
Labels
bug Something isn't working dev Needs some dev work

Comments

@emyarod
Copy link
Member

emyarod commented Apr 24, 2024

Description

originally reported on Slack:

https://ibm-studios.slack.com/archives/CL83LMKSA/p1711102469594919

When using is-selectable on cds-table I'm seeing a weird alignment issue in Firefox with the checkboxes in each table row. The checkboxes are top-aligned instead of in the middle of the row:
image

If I use Edge instead of Firefox, they are middle aligned:
image

But the really odd thing is, in the example in the docs, the checkboxes are displayed middle aligned, even in Firefox!
image

So I thought maybe it was something in my code, but I can't see what's different about what I've done to the example. Here's a CodeSandBox link to show the problem.

Two other things which are also worth pointing out.

  1. As I've mentioned before, to get the checkboxes to appear in a data table, for some reason you have to include the toggle js file. I don't think that's particularly obvious, or documented. So if it's intended, then probably need to mention that?
  2. In my CodeSandBox above, I specifically didn't add the is-sortable tag to the table. So why are the columns sortable?! In the Example in the Docs I linked to above, those columns aren't sortable. So it's not clear to me what makes the columns sortable or non-sortable. Bug? Related to the checkbox alignment?

Component(s) impacted

data table with selection

Browser

No response

Carbon for IBM.com version

2.8.0

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

Package

@carbon/web-components

CodeSandbox example

https://web-components.carbondesignsystem.com/?path=/story/components-datatable-selection--default

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct
@emyarod emyarod added bug Something isn't working dev Needs some dev work labels Apr 24, 2024
@emyarod emyarod self-assigned this Apr 24, 2024
@emyarod emyarod moved this to Doing in Carbon for IBM.com Apr 24, 2024
@emyarod emyarod mentioned this issue Apr 24, 2024
Merged
@kodiakhq kodiakhq bot closed this as completed in #11743 May 2, 2024
kodiakhq bot pushed a commit that referenced this issue May 2, 2024
@emyarod
fix(data-table): center align checkboxes (#11743)
3c045f5 
### Related Ticket(s)

Closes #11742

### Description

This PR center aligns data table checkboxes within their flexbox divs in order to avoid reliance on inconsistent `vertical-align` implementations across various browsers

### Changelog

**New**

- data table checkbox flexbox alignment rule

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
@github-project-automation github-project-automation bot moved this from Doing to Done in Carbon for IBM.com May 2, 2024
kennylam pushed a commit to kennylam/carbon-for-ibm-dotcom that referenced this issue Jun 11, 2024
@emyarod
fix(data-table): center align checkboxes (carbon-design-system#11743)
942a3d3 
### Related Ticket(s)

Closes carbon-design-system#11742

### Description

This PR center aligns data table checkboxes within their flexbox divs in order to avoid reliance on inconsistent `vertical-align` implementations across various browsers

### Changelog

**New**

- data table checkbox flexbox alignment rule

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@emyarod emyarod

Labels
bug Something isn't working dev Needs some dev work
Projects
Carbon for IBM.com
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(data-table): center align checkboxes emyarod/carbon-for-ibm-dotcom
1 participant
@emyarod