网格专业编辑器的行高错误答案

【问题标题】：wrong row height for grid pro editor网格专业编辑器的行高错误
【发布时间】：2021-07-19 09:11:20
【问题描述】：

我使用 vaadin 14.6.1 和网格。我已经通过 @CssImport 使用以下 css 使行高更小/更密集：

[part~="cell"] {
    font-size: 12px;
    min-height: 20px;
    padding: 0px;
    margin: 0px;
}

:host(.kalkulation-material-grid) [part="row"] {
    min-height: 20px;
    max-height: 20px;
}

网格有一个带有 appendHeaderRow() 的 headerRow，其中将显示 TextField，用作此列的过滤器。如何使这些文本字段更小/更密集。我无法调整 headerRow 的 rowHeight。第一行也有错误的行高，见截图。

如何调整这些行高？

【问题讨论】：

如果我正确理解了这个问题，您需要将 TextField 自定义为更小，以便该行不会拉伸高度以适应它。
是的，这就是问题所在。我所有的 CSS 更改都不起作用。

标签： css vaadin vaadin-grid vaadin14

【解决方案1】：

来自 Discord：

Dense Grid Cookbook example 是这样做的： grid.setThemeName("dense");

:host([theme~="dense"]) [part~="cell"] {
    min-height: var(--lumo-size-xxs);
}
:host([theme~="dense"])  {
    font-size: var(--lumo-font-size-xs);
}
: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));
 }

该示例中只有常规文本内容，因此 TextFields 可能需要一些额外的styling。

【讨论】：