Grid items details height bug with content loaded asynchronously

Flow
1

Bug occurs in Vaadin 10.0.0.beta3, Chrome and Firefox

When I have grid with item details generator as FlexLayout with asynchronously loaded content, the details have wrong height and row dissapears.

grid = new Grid<>();
	grid.addColumn(SimplePayment::getPaymentStatus).setHeader("Status").setWidth("calc(100% - 100px - 125px)");
	grid.addColumn(SimplePayment::getPaymentAmount).setHeader("Do wypłaty").setWidth("100px");
	grid.addColumn(SimplePayment::getPayoutDate).setHeader("Wypłacono dnia").setWidth("125px");
	grid.setDetailsVisibleOnClick(true);
	grid.setItemDetailsRenderer(new ComponentRenderer<FlexLayout, SimplePayment>(item -> {
		FlexLayout details = new FlexLayout();
		details.addClassName("flex-column");
		UI ui = UI.getCurrent();
		PaymentService paymentService = PortalRest.initClient()
						.build(PaymentService.class);
		VaadinSession current = VaadinSession.getCurrent();
		new Thread(() -> {
			VaadinSession.setCurrent(current);
			List<PaymentComponent> components = paymentService.getPaymentComponents(item.getId(), item.getPaymentType().ordinal());
			ui.access(new Command() {

				@Override
				public void execute() {
					components.forEach(component -> {
						details.add(new Label(component.getName()));
					});
					ui.push();
				}
			});
		}).start();
		return details;
	}));
grid.setHeightByRows(true);
grid.getElement().setAttribute("theme", "compact row-stripes");

Grid before any action:

![image]
(https://user-images.githubusercontent.com/11396254/37760507-2fdde96c-2db7-11e8-8fef-c2708a60bac7.png)

After click on first row:

![image]
(https://user-images.githubusercontent.com/11396254/37760622-7a22c100-2db7-11e8-8334-9de7876ac4b7.png)

But when I only change browser width, it looks correctly:

![image]
(https://user-images.githubusercontent.com/11396254/37760569-5c1d0d64-2db7-11e8-92c5-578f61969fb6.png)

2

Sorry for the delay. You can tell grid to recalculate after the content has loaded by invoking grid.notifyResize().

3

I have the same problem with Vaadin 12. When can i call notifyResize? Is there an event that the Details are shown? or should i use the click-listener?

BTW … There is no grid.notifyResize() in Vaadin Flow :frowning:

4

Similar problem - although with the details component being created synchronously. It’s taller than the details views in the examples. First time a given row shows its details, the space for the details is not large enough and the contents are displayed incorrectly. Second time the same row is displayed it looks correct. This happens with both the Lumo and Material themes. While it is malfunctioning it appears that the details is only given as much room as one normal-sized row.

5

We have the the same problem.
when switching from vaadin 10.0.9 to 12.0.3 the detailsview is not displayed correctly.
any workarounds/solutions?

6

I still didn’t found any solution.

BTW: I am using firefox and Vaadin 12.0.0

Is this a bug in Vaadin 12?

7

Hi. With Flow Grid the following works for me at least:

grid.getElement().executeJavaScript("this.notifyResize()");

8

Was also able to reproduce the issue with synchronously populated details not displaying properly. Investigating what’s causing this. You can use the following inside your details renderer as a workaround for now:

grid.getElement().executeJavaScript("requestAnimationFrame((function() { this.notifyResize(); }).bind(this))");

9

Also see https://github.com/vaadin/vaadin-grid-flow/issues/433

10

Thx Tomi, that works. I will keep a eye on the issue, but the workaround helps.

11

This Problem also exists in regular Vaadin 8. Unfortunately there is no getElement() method in the Grid class. Any ideas how to execute the Javascript on the grid, instead of using Page.getCurrent().getJavaScript().execute() ?