CODEWITHSUNDEEP
vaadinvaadin-flowvaadin-gridvaadin14
Stephane Grenier
Stephane Grenier

Reputation: 15927

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

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.

Upvotes: 3

Views: 1303

Answers (3)

Jean-Christophe Gueriaud
Jean-Christophe Gueriaud

Reputation: 1378

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;
}

Upvotes: 3

Rolf
Rolf

Reputation: 2388

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

Upvotes: 1

fhdhsni
fhdhsni

Reputation: 1629

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");

Upvotes: 1

Related Questions