How to align to top with UI.scrollIntoView?

Hello

I use UI.scrollIntoView(Component component) (Vaadin 7.5.8).

Problem is that scroll align bottom of the element (component) with bottom of the window. This is pointless behavior.
More suitable behavior is align top of the element (component) with top of the window.

Can I change this behavior?
Any pointers would be greatly appreciated!
 

Hi,

I would try to do so that I add an empty Label or CssLayout with 0px height to the top of the component you want to scoll into. And then use that created component with UI.scrollIntoView.

Thanks,

-Henri

I've created ticket: https://dev.vaadin.com/ticket/19272

Hi, could you solve this problem?

Hi Shabnam,

there is no simple solution. I used javascript.

scroll.js (src/main/webapp/VAADIN/javascripts/)

function smoothScroll(panelID, targetID) {

    var time = 800
    var panel = document.getElementById(panelID)
    var target = document.getElementById(targetID)

    var panelChildren = panel.childNodes;
    var panelSub = panelChildren[1];
    var startScroll = panelSub.scrollTop;

    // time when scroll starts
    var start = new Date().getTime(),

    // set an interval to update scrollTop attribute every 25 ms
    timer = setInterval(function() {
        // calculate the step, i.e the degree of completion of the smooth scroll
        var step = Math.min(1, (new Date().getTime() - start) / time);
        panelSub.scrollTop = startScroll + (step * target.offsetTop);

        // end interval if the scroll is completed
        if (panelSub.scrollTop > target.offsetTop) {
            panelSub.scrollTop = target.offsetTop
            clearInterval(timer);
        }
    }, 25);
}

YourClass.java
@JavaScript({ "vaadin://javascripts/scroll.js" })

public class YourClass extends Panel {
...
        setId("PANEL_SCROOL_ID");
...
        VerticalLayout content = new VerticalLayout();
        setContent(content);
...
        VerticalLayout vl1 = new VerticalLayout();
        vl1.setId("vl1")
        content.addComponent(vl1);

        VerticalLayout vl2 = new VerticalLayout();
        vl2.setId("vl2")
        content.addComponent(vl2);

        VerticalLayout vl3 = new VerticalLayout();
        vl3.setId("vl3")
        content.addComponent(vl3);
...
        Button scrollDownButton = new Button("Button");
        scrollDownButton.addClickListener(e ->
              Page.getCurrent().getJavaScript().execute("smoothScroll('PANEL_SCROOL_ID', 'vl3')");
        );
        vl1.addComponent(scrollDownButton);
...
}

Hi Lukas

Thanks I will try this solution.

Page.getCurrent().getJavaScript().execute("document.getElementById(\"idOfElement\").scrollIntoView()")

I found something like this also works