Vaadin-grid: `height: auto;` on vaadin-grid inside row-details incorrect placement / size

[dafky2000]

Description

Placing a vaadin-grid inside a row-details template with height: auto (so the grid height matches the content height) causes the row-details to open on top of or above the selected element.

Possibly related to: #1141 #1089

Expected outcome

row-details should open as normal. If you remove the height: auto css than the row-details are placed correctly but there is white space and the end of the content area.

Actual outcome

row-details opens above (and outside) the scrollable grid area.

Live Demo

https://jsfiddle.net/6hjL9x7a/1/

Steps to reproduce

• Load the fiddle
• Check the first "show details" checkbox.
• Observe incorrect behaiviour
• Select another checkbox and then clear all selections
• Select the same first element again
• Now it is shown correctly

Browsers Affected

• [x] Chrome
• [x] Firefox
• [ ] Safari
• [ ] Edge
• [ ] IE 11
• [ ] iOS Safari
• [ ] Android Chrome

[dafky2000]

In Firefox: the "child" grid seems to be placed a little lower.
In Chrome: it is placed over top of the current row and above the current view-port.

[Highstorm]

same issue here, would be nice to have a solution for it.

push

[Montrazul]

same issue here.

grid.setHeightByRows(true)

also does not fix the issue.

push

[tomivirkki]

The contents of row details are measured at the time of opening it. The contained grid is not populated at that time so you'll need to tell grid to re-measure once the rendering is finished with grid.notifyResize(). Same applies if you for example dynamically add new rows to the grid inside the details row.

Here's an example https://glitch.com/edit/#!/grave-potato

This should be documented better: addressed in https://github.com/vaadin/vaadin-grid/issues/1060