Vaadin 7.7.15 - Window scroll jumping to top

Hi All,

I need some help regarding an issue with the Window component in Vaadin. We’re still using Vaadin 7.7.15.

I created a basic project and modified it to open a window to show the issue.

Basically what happens, When the Window has a dynamic height (relative to the browser size) and there is a vertical scrollbar (up and down), if I scroll down and click a button (that does nothing) or select an option from a Combobox then scrollbar jumps to the top.

Basically what I want is why is it jumping to the top? And how do I fix it so that it does not jump to the top?

There is nothing special about this application, no special styling changes either.

I’m using Chrome 69.0.3497.100 64Bit. But this seems to happen with other browsers as well (Edge, Firefox, Safari, Internet Explorer)

What does work is if I make the window a specific height e.g. window.setHeight(90, Unit.PERCENTAGE); then it does not scroll back to the top or lose the scrollbar.

Here’s the code:

package com.example.ScrollingIssue;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI
{
	@Override
	protected void init(VaadinRequest vaadinRequest)
	{
		final VerticalLayout layout = new VerticalLayout();

		Button button = new Button("Click Me");
		button.addClickListener(e ->
		{
			Window window = new Window("Broken Window");
			
			window.setWidth(90, Unit.PERCENTAGE);
			
			CssLayout contentLayout = new CssLayout();
			
			for (int i = 0; i < 99; i++)
			{
				Button tf = new Button("TextField: " + i);
				contentLayout.addComponent(tf);
			}
			
			window.setContent(contentLayout);
			
			addWindow(window);
		});

		layout.addComponent(button);

		setContent(layout);
	}

	@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
	@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
	public static class MyUIServlet extends VaadinServlet
	{
	}
}

As per attachments:
Step 1: Click the button “Click Me” and it will open the window in Step 2.PNG

Step 2: Scroll down to the bottom of the window (Might have to resize window to make it have to scroll)

Step 3: Click on any button

Step 4: See that scrollbar is now missing and that it scrolled to the top again.

If you have any more questions, I will be more than happy to answer them to get this sorted out.

17330181.png
17330184.png
17330187.png
17330190.png

I tried your test application, but I can’t replicate the issue. So there is something wrong in your setup locally, could be theme or something like that. It could be due corrupt jars. So if you clean Vaadin 7.7.15 from .m2 cache and try again, it could help.

Tatu Lund:
I tried your test application, but I can’t replicate the issue. So there is something wrong in your setup locally, could be theme or something like that. It could be due corrupt jars. So if you clean Vaadin 7.7.15 from .m2 cache and try again, it could help.

I’ve removed my whole .m2 folder and refreshed it. Busy rebuilding workspace and downloading jars. I will also try a different web server and recompile the theme as well. Will revert back after.

Tatu Lund:
I tried your test application, but I can’t replicate the issue. So there is something wrong in your setup locally, could be theme or something like that. It could be due corrupt jars. So if you clean Vaadin 7.7.15 from .m2 cache and try again, it could help.

Okay so I’ve cleared my .m2 folder and also made so to recompile. Also I’m now running via jetty and it still happens.
Taking a closer look at the actual HTML, I can see clear differences between opening the window and clicking a button inside the window afterwards.

See before.png / after.png. Class v-has-height gets removed as well as a style with height: 752px;

Just to make it clear, the button I’m clicking does nothing, it doesn’t even have an action listener and I’m not specifically removing any styles from the window manually.
17331931.png
17331934.png

I seem to have wrong order of doing things, since I can actually now replicate the issue.

And the problem seems to be linked to Button and Window. For example if I use TextField instead of Button, the problem does not happen. The problem happens also with e.g. VerticalLayout, so it seems not be specific to CssLayout. But it does not happen with Panel.

Tatu Lund:
I seem to have wrong order of doing things, since I can actually now replicate the issue.

And the problem seems to be linked to Button and Window. For example if I use TextField instead of Button, the problem does not happen. The problem happens also with e.g. VerticalLayout, so it seems not be specific to CssLayout. But it does not happen with Panel.

Interesting. It happens with a Combobox as well.

I will have a look at the panel and see if that will work for me.

After some play, I can say that clicking the button will trigger the Window to refit according to content, and after that it is tall enough so that scroll bar is not needed. However the Window does not fit into screen.

I found some bug reports that seems to be linked to the issue

https://github.com/vaadin/framework/issues/6650

https://github.com/vaadin/framework/issues/5865

https://github.com/vaadin/framework/issues/7204

Setting height to Window, e.g. setHeight(“100%”) seems to be a good workaround to this problem.

Furthermore, the issue seems to have been fixed in Vaadin 8.

Tatu Lund:
After some play, I can say that clicking the button will trigger the Window to refit according to content, and after that it is tall enough so that scroll bar is not needed. However the Window does not fit into screen.

I found some bug reports that seems to be linked to the issue

https://github.com/vaadin/framework/issues/6650

https://github.com/vaadin/framework/issues/5865

https://github.com/vaadin/framework/issues/7204

Setting height to Window, e.g. setHeight(“100%”) seems to be a good workaround to this problem.

Furthermore, the issue seems to have been fixed in Vaadin 8.

On our system we currently set height to 100% but in most cases end up in a lot of “white space”. How did you use the panel to not get the issue as I still get it while using the Panel.

How did you use the panel to not get the issue as I still get it while using the Panel.

I tested Panel without Window, which is not applicable for your case. Note Window extends Panel, so there is no point in using Panel inside Window.

Tatu Lund:

How did you use the panel to not get the issue as I still get it while using the Panel.

I tested Panel without Window, which is not applicable for your case. Note Window extends Panel, so there is no point in using Panel inside Window.

Ah I see. Thank you for your help Tatu Lund. I’ll dig around a little bit more and see if I can find another work around but will also check to maybe move to Vaadin 8 then.

On our system we currently set height to 100% but in most cases end up in a lot of “white space”.

I see. For this I recommend the following workaround. Inspect with Chrome dev tools what is the height of one “row” in your Window content.

Calculate number of “rows”, and determine how many pixels that makes in total, call it contentHeight. Take min(contentHeight,Page.getCurrent().getBrowserWindowHeight()) and set that as height for the Window.