Display Issue with AppLayoutRouterLayout and LeftLayouts.LeftOverlay Vaadin 14

[ghost]

Describe the bug
At least in debug mode: After a web page has been loaded, the components (except the AppBar) are moved screen upwards.

Steps to reproduce the behavior:

1. Update from Vaadin Version 14.2.3 to Vaadin Version 14.3.0 (or higher)
2. Restart web applicationin debug mode
3. Go to a web page using the AppLayoutRouterLayout and the LeftLayouts.LeftOverlay layout.
4. See error

Additional Information:

• OS: Windows 10
• Browser: Google Chrome Version 86.0.4240.198 (other browsers too)

[appreciated]

Hi @DanHoerSeele hmm before going more into detail upgrade to the latest vaadin version.
Then follow these instructions:

1. Remove the following files / folders form you project:
   • target
   • node_modules
   • package.json
   • package-lock.json
   • webpack.config.js
   • webpack.generated.js
2. Then run a mvn clean install (or similar when using gradle).
3. Now check if the issue still occurs.

[ghost]

Hi, that was a nice idea removing the generated files. Unfortunately, the bug still exists.

[appreciated]

I tried using the app-layout addon 4.0.0 with Vaadin 14.4.2 using the LeftLayouts.LeftOverlay:

It works so on my machine (Chrome and FF) 🙂 so I guess the issue lies within your setup.

To solve this issue I will need more information:

• Are you using Maven or Gradle?
• What are you using to run the Vaadin Application (Springboot / Jetty Maven Plugin)?
• Can you provide a screenshot showing the issue?
• Is the issue occurring in the developer mode or in the production mode only?
• Could you check the Browser developer tools for errors (JavaScript errors or failed Requests)?

[ghost]

Hi, to your questions:

• Maven
• Springboot
• error occurs in developer mode
• no errors in developer tools

In the meantime I wonder whether the vaadin livereload function may be the reason for this problem.
Could you check with livereload feature active but unconfigured?

[appreciated]

And you are using the 4.0.0 release?

[ghost]

yes, I am using the 4.0.0 version of the AppLayoutRouterLayout

[ghost]

As I thought, the issue comes from the livereload function. When this function is disabled, it works again.