Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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
Hello Henri,
thanks for your answer but your solution doesn't work. Let me explain the problem with pictures.
I have page with 3 components: green, red and blue.
I would like to scroll to RED component.
For each state there are 2 options: red component is smaller and higher than screen.
Actual state:
Ideal state:
Henri's solutiuon:
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);
...
}
Page.getCurrent().getJavaScript().execute("document.getElementById(\"idOfElement\").scrollIntoView()")
I found something like this also works