How to add a button in a compact Vaadin 14 / Flow Grid

Question

Using the inline java editing example for a Vaadin 14 / Flow Grid at: https://vaadin.com/docs/latest/ds/components/grid/#inline-editing-java-only (ignoring the save and cancel portion) how can I add an edit button for a compact grid. All other cells seem to be of height 30px but the addComponentColumn() seems to be of height 46px. There's a setWidth() method but no setHeight(). My code is:

Column<T> editColumn = addComponentColumn(t -> {
   Button editButton = new Button("Edit");
   editButton.addThemeVariants(ButtonVariant.LUMO_SMALL);
   editButton.addClickListener(click -> {
       if(getEditor().isOpen())
           getEditor().cancel();
       getEditor().editItem(t);
   });
   return editButton;
})

And to change the width I can do editColumn.setWidth("150px") for example but I cannot seem to adjust the height so that if I use grid.addThemeVariants(GridVariant.LUMO_COMPACT) it will render the rows in a compact manner. No matter what I do the rows seem to be rendered at their normal height.

UPDATE - Just to add it appears to be the vaadin-grid-cell-content that has the extra padding. Using a smaller button helps but there's still too much padding for the column with the button. I'm not sure how to adjust that for the column with the edit/save buttons.

Jean-Christophe Gueriaud · Accepted Answer · 2021-08-27T07:56:13.527

You can check this example to render a style with almost no padding in the grid cell: https://cookbook.vaadin.com/grid-dense-theme

To apply it, you need to add @CssImport(themeFor = "vaadin-grid", value = "recipe/densegrid/densegrid.css")

And use this css:

:host([theme~="dense"]) [part~="cell"] {
    min-height: var(--lumo-size-xxs);
}
:host([theme~="dense"])  {
    font-size: var(--lumo-font-size-xs); // use the font size you prefer
}
:host([theme~="dense"]) [part~="cell"] ::slotted(vaadin-grid-cell-content) {
    padding: 1px var(--lumo-space-s);
}
:host([theme~="dense"]:not([theme~="no-row-borders"])) [part="row"][first] [part~="cell"]:not([part~="details-cell"]) {
     border-top: 0;
     min-height: calc(var(--lumo-size-xxs) - var(--_lumo-grid-border-width));
 }

By default the Vaadin Grid even in compact mode has some padding in the cells.

If you want to remove the padding for one cell you can add a classname Generator on a column:

grid.addComponentColumn(t -> new Button(t)).setClassNameGenerator(e -> "no-padding-cell");

And remove the padding with this css:

[part~="cell"].no-padding-cell ::slotted(vaadin-grid-cell-content) {
    padding: 0px;
}

Is there a way to edit the padding for just a specific row rather than the whole grid? That would be ideal for the edit button column rather than the whole table. — Stephane Grenier, Aug 26 '21 at 15:39

score 1 · Answer 2 · answered Aug 20 '21 at 06:15

1

You can adjust the height of the Button to get to the height that you want. As an example:

editButton.getStyle()
        .set("margin", "0")
        .set("--lumo-button-size", "20px")
        .set("--lumo-font-size-s", "12px");

answered Aug 20 '21 at 06:15

fhdhsni

1,529
1
13
21

Unfortunately the issue isn't the button height, it's 30px. It's the wrapper around it, the vaadin-grid-cell-content that's got the extra height. I believe it's due to the padding on the vaadin-grid-cell-content but I'm not sure how to remove it for just the edit/save button column. It has a padding of 4px and 16px. – Stephane Grenier Aug 20 '21 at 16:59

score 1 · Answer 3 · answered Aug 27 '21 at 06:51

1

Applying the tertiary-inline theme variant to the button removes all of its own vertical padding, so that might help.

answered Aug 27 '21 at 06:51

Rolf

2,178
4
18
29

How to add a button in a compact Vaadin 14 / Flow Grid

3 Answers3