CODEWITHSUNDEEP
vaadinvaadin-flowvaadin-gridvaadin14
Ted Dennler
Ted Dennler

Reputation: 21

Vaadin 14 grid initial row height is incorrect and rows overlap

I am using Vaadin Flow 14.6.2, the material theme, and custom CSS styling in my application. When loading a grid that has a cell that has content that wraps 5 times, when the grid initially loads the grid rows overlap, truncating the information in the cell that contains wrapped data. Looking at the CSS this is due to CSS "transform: translateY(#px)" setting that is too small onto the Grid's TR (row) tags. As a point of reference, the grid places a translateY of 76 pixels on the second row.

Screen shot of grid with overlapping rows

Selecting a row in the table or resizing the browser will cause the grid to refresh and the translationY value will be recalculated, increasing the translateY value to 118 pixels, and the grid will display all rows with the appropriate spacing.

Screen shot of grid after selecting a row

Is this a defect in the grid where the row offsets are not initially calculated to the correct height?

I am not sure how to debug this further or if there are any workarounds to trigger the grid to recalculate row sizes so that it may display correctly from the start. I tried programmatically selecting the first row and the result was that the first row displayed correctly but subsequent rows were truncated.

Upvotes: 1

Views: 587

Answers (2)

herman
herman

Reputation: 12305

I'd try adding a Div element inside the cell using a ComponentRenderer, and put the white-space: normal and word-break: break-word on that element. Since the grid supports adding components of any size, and should adjust row height according to the heighest component, this may trigger initial calculation.

Upvotes: 2

Ted Dennler
Ted Dennler

Reputation: 21

I was able to work around this issue by changing how this page is navigated to. A change was made to a parent view to trigger navigation using an anchor instead of a button. With an anchor a new UI is created and then the grid is added to it, but with the button the existing UI is reused. There is something in the display of the grid on a new UI or something related to the difference in navigation that triggers this problem. Reverting back to using a button is a superior solution as it solves this problem and does not trigger creation of a new UI.

Upvotes: 1

Related Questions