MPR + Vaadin 7 and Grid resize issue, Chrome

I have noticed a weird problem, at least in Chrome. It seems tables and grids, when you go from not full screen to full screen, or vice versa, the full screen is not sized correctly. I use MprTheme for a legacy theme. Below are the images in question.

![starting full screen]
(https://i.postimg.cc/2j4DX2tj/Starting-Full-Screen.png)

Figure 1: Starting full screen

![minified screen]
(https://i.postimg.cc/cCcP15qQ/Minified-Screen.png)

Figure 2: Minified screen

![resized to full screen]
(https://i.postimg.cc/7Ymjpcn4/Resized-To-Full-Screen.png)

Figure 3: Full screen again, resized

![Clicking line fixes it]
(https://i.postimg.cc/MHzrLbcX/Full-Screen-Clicking-Line.png)

Figure 4: Clicking line makes things look good again

What you see could be related to this reported issue

https://github.com/vaadin/multiplatform-runtime/issues/23

I am tested one app, and I noticed that responsive width ranges are updated when I click. So the root cause could be the same despite in your case it is not about responsive.

One thing as a workaround you could try is to set browser window resize listener and do JavaScript call of “vaadin.forceLayout()” upon resize and see if it helps.

E.g. in MainLayout (Flow) the default Route, add

private Registration listener;

@Override
protected void onAttach(AttachEvent attachEvent) {
	super.onAttach(attachEvent);
	getUI().ifPresent(ui -> listener = ui.getPage().addBrowserWindowResizeListener(event -> {
		ui.getPage().executeJavaScript("vaadin.forceLayout()");        	        	
	}));
}

@Override
protected void onDetach(DetachEvent detachEvent) {
	// It is needed to remove the BrowserWindowResizeListener during detach
	// in order not to bloat browser resources
	listener.remove();
	super.onDetach(detachEvent);
}

This seemed to fix my test app.

For anyone else, this also fixed my app as well, at least for this type of problem.

What you see could be related to this reported issue

https://github.com/vaadin/multiplatform-runtime/issues/23

I am tested one app, and I noticed that responsive width ranges are updated when I click. So the root cause could be the same despite in your case it is not about responsive.

One thing as a workaround you could try is to set browser window resize listener and do JavaScript call of “vaadin.forceLayout()” upon resize and see if it helps.

E.g. in MainLayout (Flow) the default Route, add

private Registration listener;

@Override
protected void onAttach(AttachEvent attachEvent) {
	super.onAttach(attachEvent);
	getUI().ifPresent(ui -> listener = ui.getPage().addBrowserWindowResizeListener(event -> {
		ui.getPage().executeJavaScript("vaadin.forceLayout()");        	        	
	}));
}

@Override
protected void onDetach(DetachEvent detachEvent) {
	// It is needed to remove the BrowserWindowResizeListener during detach
	// in order not to bloat browser resources
	listener.remove();
	super.onDetach(detachEvent);
}

This seemed to fix my test app.

Tatu, this seems like the same answer from 3 months ago. Is it, or maybe you posted the answer to the wrong question? Just confirming I am not missing something.

Just confirming I am not missing something.

No you are not missing anything, the duplicate is here by accident.