Grid with scrollbar in grid item details cuts off grid content

[thomasdewaelheyns]

• Description of the bug: A grid with a scrollbar inside the item details from a parent grid cuts off the content of the parent grid. See how the buttons in the grid are cut off in the screenshots below.

Before opening the details: After opening the details:

Note how the buttons are cut off.

• Minimal reproducible example: https://github.com/thomasdewaelheyns/vaadin14gridbug
• Expected behavior: The expected behavior would be for the grid to take the extra vertical space to add the scrollbar without interfering with a parent layout.
• Actual behavior: The child grid adds a scrollbar and cuts off part of the parent content
• Versions:
  • Vaadin / Flow version: Vaadin 14.1.25 and Flow 2.1.8 through the Vaadin BOM 14.1.25
  • Java version: OpenJDK version 1.8.0.232
  • Windows 10 Home 1903 build 18362.778
  • Browser version: verified on both Chrome 81.0.4044.113 and Firefox 75.0

[tomivirkki]

This is probably because of setHeightByRows dynamically increases the grid height. Should be fixed by dispatching an "iron-resize" event whenever the rows change in grid with heightByRows in use.

As a workaround, you could try invoking grid.getElement().executeJS("this.notifyResize") on the host grid whenever new items are added to the details grid.

[thomasdewaelheyns]

Thanks for the feedback. I'll try notifyResize as a workaround until this issue is fixed.