vaadin touch and the Safari address bar

I currently test vaadin touch for a new business application and I’m facing a huge problem:

The Safari address bar is never hidden
and I need the whole height for this application precisely on the small iPhone display. I tried the demo apps and I’m facing the same problem.
If I open another web page, the address bar is immediately hidden and not on the vaadin touch applications pages.

Is there a solution?

Thank you for your help



Most commonly on iOS you should add touch kit apps as “home screen apps”. Then also other browser chrome is not shown so you can really use all the available screen space.

The issue you are describing has got to to with the way Vaadin by default handles top level “scroll areas” and 100% height. You can get to the “normal scrolling” as well by using some css and not using 100% heights. You can also use the infamous scrollTop(0,0) hack to hide the location bar on initial load. Here is and example deployment of such (my demo server appears to be quite slow today, sorry) :

Related CSS snipettet that reverts to “normal scrolling”:
/* Revert to “normal scrolling” */
.v-app, .v-generated-body, .v-view {
height: auto;
overflow: visible;
border-top: 0;
position: static;
overflow: visible;

Then to do the infamous scrollTo hack you can use executeJavaScript method with script something like this:
setTimeout(new function(){window.scrollTo(0,0);},10);


Excellent, thank you Matti,