No scroll to top on view change

[ManuelAtJEE]

Hi all, first of all, thank you for providing the app starters! They are really helpful.

Unfortunately there's a scroll bug in the bakery app for Vaadin 8, that can be easily reproduced:

• Set your browser window height below 500 pixel, then go to Dashboard, scroll to bottom and choose an order by clicking the item
• Now the order view is shown, but is not scrolled to top!

In our opinion, this is an annoying problem on desktops and even a serious problem on mobile devices. In most cases, there are no scrollbars visible. So the user cannot know, if there's more content above.

My first attempt to solve this problem was to change the vertical-layout to panel (where you can control the scroll state), but unfortunately the panels scrolling does't work with the dashboard (responsive) view.

The problem should be present in all browsers. Chrome, Firefox and IE 11 are tested positive.

I also migrated the starter app to Vaadin 8.3.1. The issue remains.

We are very surprised that such a simple use-case has not yet been taken into account.

[ManuelAtJEE]

I managed to "workaround" the issue by recreating the content container with every view change:

public class MainView extends MainViewDesign implements ViewDisplay {
[...]

    @Override
    public void showView(View view) {
        changeContentAndFixNotScrollToTopBug(view.getViewComponent());
        [...]
    }

    private void changeContentAndFixNotScrollToTopBug(Component viewComponent) {
        [parentContainer].removeComponent(content);
        content = new VerticalLayout(viewComponent);
        content.setSizeFull();
        content.setMargin(false);
        content.setStyleName("content-container v-scrollable");
        [parentContainer].addComponent(content);
        [parentContainer].setExpandRatio(content, 1);
    }

By recreating the container, the scroll state is always reset to the top. This fix seems to work in all browsers and should only add a little more rendering time.

[johannesh2]

You can also try another workaround by adding JavaScript.eval("document.getElementById('content').scrollTop=0"); to MainView showView method.