Checkboxes ui styling error on data tables

[Pawel1894]

Hey,

I was exploring yours docs and found a bit strange behaviour on data tables, when selecting row. When row is selected checkbox is higher than unchecked, thought you might look into that it can scare away some devs I guess.

Selected row:

Unselected row:

Link to example: https://ui.shadcn.com/docs/components/data-table

[nicoknoll]

I fixed this by adding "display: inline-flex;" / tailwind "inline-flex" to the checkbox component

[nicoknoll]

Also worth mentioning that this happens in Firefox (at least for me). In chrome it looks fine

[nugmanoff]

Same here, display: inline-flex also fixes the thing on Firefox

[marten]

inline-flex actually isn't perfect either, the checkbox icon inside is then nudged too far right and/or enlarged. The whole component also still sitting with the bottom edge on the baseline rather than hanging slightly below it when it is checked. And toggling between checked and unchecked you can see the row changing height by 1 pixel.

I don't have good enough CSS chops to figure out the fix I think (I have tried) but I'd like it if there was a proper update on this.

[infiniwave]

Hello there. I'm also experiencing the same issue. I also noticed that when selected, not only does the check box move up, the row also increases in height by 0.8 pixels. inline-flex does indeed fix the check box moving issue, but the row still gets taller, and as said in the post above, the check is misaligned.

[infiniwave]

It seems like the amount the row height enlarges is proportional to the window size.

[iamtburger]

I just had this issue with the row size increasing. I could fix it by changing the following in the Checkbox component:

<Check className="h-4 w-4" /> to <Check className="h-3.5 w-3.5" />. Haven't checked if this is a solution in general yet, but in my case it worked. But I'll try to take a look.

[IgorDePaula]

With display inline-flex still padding botton when is selected =/

[IgorDePaula]

In both: firefox and chrome.

[IgorDePaula]

You must join inline-flex with mt-2

[gburtini]

I fixed this by adding an absolute to the indicator parent component. That might not work for your (other) use cases for a variety of probably obvious reasons.

[lil-liamtr]

[@supports(-moz-appearance:none){&>[role=checkbox]}]:inline-flex [@supports(-moz-appearance:none){&>[role=checkbox]}]:justify-center

Currently, im using firefox and get that problem but on chorme and edge is fine. So my solution is add this class into TableHead and TableCell. It should be work propertly.

[sangdth]

The solution from @n3mooo works perfectly for me.

[nuclei272]

I followed @n3mooo's suggestion. For me it went like this:

TableHead: [&:has([role=checkbox])]:inline-flex [&:has([role=checkbox])]:items-center

TableCell: [&:has([role=checkbox])]:inline-flex [&:has([role=checkbox])]:items-center h-16

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.