How can I get a Button to fill the entire cell in a Grid?

I have a ComponentRenderer that outputs a Button. I want the button to fill the entire cell, but I’m struggling to get rid of the padding.

grid.addComponentColumn(row → {
var button = new Button(VaadinIcon.TRASH.create());
return button;
}).setFlexGrow(0); //.setWidth(“40px”)

This gives me a column that is 100px wide. 16+16px is padding on the itself, and I’d like to get rid of it.

I can target all cells with:

vaadin-grid-cell-content {
padding: 0;

but targeting only cells with a button does not work:

vaadin-grid-cell-content:has(vaadin-button) {
padding: 0;

Any suggestions?

    padding: 0;
works fine for me

do you have that in a global stylesheet like styles.css?

Correction: It works in Chrome and Edge, but not in Firefox (118.0.2)

Probably because of this: :has() CSS relational pseudo-class | Can I use... Support tables for HTML5, CSS3, etc

Well, yes, FF doesn’t support :has yet.

So the workaround today would be to

  1. Apply a classname to the cells using Grid’s PartNameGenerator feature (e.g. button-cell)
  2. Introduce a custom property on based on that:
vaadin-grid::part(button-cell) {
  --my-padding: 0;
  1. And consume that property in a css block for the content element, with the normal padding as fallback:
vaadin-grid-cell-content {
  padding: var(--my-padding, var(--lumo-space-xs) var(--lumo-space-m));

It’s a bit awkward, but in 24.3 there will at least be a property for it, so you’ll be able to do it with just 1 CSS block:

  --vaadin-grid-cell-padding: 0;

Ah, didn’t think of that. When I turn on “layout.css.has-selector.enabled” in Firefox it kinda works.
Ie: Initially it doesn’t work, but if I open the dev tools the page redraws itself and it works. I guess I’ll just have to wait until they’re done.

Thanks for the suggestion. In this instance I can afford to wait, but I like the approach