如何解决网格专业编辑器的行高错误
我使用 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。 第一行也有错误的行高,见截图。
解决方法
来自不和谐:
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));
}
该示例中只有常规文本内容,因此 TextField 可能需要一些额外的 styling。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。