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.