Vaadin on Mobile Safari


I’m using Vaadin to develop a web application that is compatible with Android and iPhone smartphones. So far so good, but lately I experienced a problem with the layout being cut from the bottom when the page is loaded from iPhone. Strangely when I open the Vaadin sampler from Safari, I experience the same issue! I’ve attached the screen. Do you know how I can overcome this problem. Probably there is an issue with some of the layouts being with fixed height… Any help will be greatly appreciated!


Sampler uses 100% height. Thus it works as designed ;)

Unfortunately iOS do not show scrollbars on scrollable containers to visually indicate that the content is scrollable and the scrolling can only be done with two fingers.

So - even though Sampler “works” (just use two fingers for scrolling) and probably your app “works” too - my recommendation is to use undefined height in iOS devices.

Also, take a look of
Vaadin Touchkit
- it could make your mobile UX a lot smoother. Try out
this demo
with iPhone/Android.

Hi Joonas,

Thanks for helping me on this! I More or less I think that the default theme is not very suitable for mobile apps, but that’s good that there is a TouchKit available! I will give it a try and post feedback