vaadin - Vaadin 14 网格初始行高不正确，行重叠

Question

我在我的应用程序中使用 Vaadin Flow 14.6.2、材质主题和自定义 CSS 样式。当加载具有包含 5 次内容的单元格的网格时，当网格最初加载网格行重叠时，会截断包含包裹数据的单元格中的信息。查看 CSS，这是由于 CSS“transform: translateY(#px)” 设置在 Grid 的 TR（行）标签上太小了。作为参考点，网格在第二行放置了一个 76 像素的 translateY。

具有重叠行的网格的屏幕截图

选择表格中的一行或调整浏览器大小将导致网格刷新并重新计算 translateY 值，将 translateY 值增加到 118 像素，并且网格将以适当的间距显示所有行。

选择行后网格的屏幕截图

这是网格中的缺陷，其中行偏移最初没有计算到正确的高度？

我不确定如何进一步调试，或者是否有任何解决方法来触发网格重新计算行大小，以便它可以从一开始就正确显示。我尝试以编程方式选择第一行，结果是第一行显示正确，但后续行被截断。

标签： vaadinvaadin-flowvaadin-gridvaadin14

Answer 1

我会尝试Div使用 a 在单元格内添加一个元素ComponentRenderer，然后将white-space: normalandword-break: break-word放在该元素上。由于网格支持添加任意大小的组件，并且应该根据最高组件调整行高，这可能会触发初始计算。