Vaadin 14 网格初始行高不正确，行重叠答案

【问题标题】：Vaadin 14 grid initial row height is incorrect and rows overlapVaadin 14 网格初始行高不正确，行重叠
【发布时间】：2021-06-21 20:50:56
【问题描述】：

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

Screen shot of grid with overlapping rows

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

Screen shot of grid after selecting a row

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

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

【问题讨论】：

你有什么样的自定义 CSS 会影响网格？
行和单元格应用了一些样式。行设置了最小高度。单元格有“white-space: normal”和“word-break: break-word”以允许文本换行。
我使用锚点删除，而是使用父视图中的按钮导航到此“详细”视图。这解决了这个问题。看来，如果视图是在新 UI 中从头开始构建的，则网格不会正确初始化行。如果使用按钮转换到详细视图，现有 UI 能够添加网格并正确初始化。我不确定为什么会这样，但使用按钮似乎是更好的方法。锚点是临时引入的，以避免在呈现带有下划线的按钮标签时出现显示问题。

标签： vaadin vaadin-flow vaadin-grid vaadin14

【解决方案1】：

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

【讨论】：

【解决方案2】：

我能够通过更改此页面的导航方式来解决此问题。对父视图进行了更改，以使用锚点而不是按钮触发导航。使用锚点会创建一个新 UI，然后将网格添加到其中，但使用按钮可以重用现有 UI。新 UI 上的网格显示中存在某些内容，或者与触发此问题的导航差异相关的内容。恢复使用按钮是一种出色的解决方案，因为它解决了这个问题并且不会触发新 UI 的创建。

【讨论】：