How to enlarge popup calendar?

I converted a previous Touchkit UI to a Vaadin 8 UI. An issue has arisen that the DateTimeField’s calendar popup is much too small on the mobile device. How can it be scaled up and all proportions kept intact? Ideally I’d go back to using a native component for this but I’ve eliminated Touchkit and all the V7 compatability packages and there is no native calendar component in Vaadin 8.

Any ideas?

If you have a magnifying glass, you can see the calendar popped up just below the middle of the display. Human fingers haven’t got a chance. :slight_smile:

Interesting. Do you happen to have a example code that we could use to check what’s going on here?

Hi Juha,

I’ve replaced the DateTimeField code with a work-around that uses 5 ComboBoxes to display and edit a date and time that is manipulated internally as a ZonedDateTime.

All I can say about the previous code is that I used pixels to define the component dimensions. But the popup calendar is out of my control (except though a hierarchy of CSS which would entail a lot of trial and error to edit). I suppose the popup is generated to a pre-determined pixel size and the phone has a screen resolution of 1080 X 1920 pixels so the calendar is displayed very small. Compounding the problem, the calendar is designed to disappear when there is a click (or touch) outside of it. That happens when you try to zoom in by unpinching, so it’s not possible to enlarge the tiny calendar either.

A great solution would be for Vaadin to incorporate the native date/time component from Touchkit into Vaadin 8 so that the various phone OS’s would display their own (excellent) time selectors natively.

A less great solution would be to provide an API for scaling the popup calendar of DateTimeField.

I’ve implemented a work-around using a series of ComboBoxes as you can see, which is clunky but useable at least.

While we’re looking at the root cause on the small datepicker, perhaps I could offer you a two step solution to try out.

With Elements Add-on (!addon/elements-add-on) you could integrate a Vaadin Date Picker WebComponent to your app ( Doing that is not as easy as it should be at this moment but we are planning to have a proper Java API for Vaadin Elements later this year.



There is even a blog post about using Vaadin Elements with Framework:

Thanks for all the suggestions Juha.

I’d have a few technical hurdles to overcome before I could make use of that technology, but it looks interesting. And while the new date picker looks excellent, my main use case is to change the time, only occasionally will the date need changing.

Having spent months preparing then converting to Vaadin 8, I look forward to its evolution. Writing mobile applications is not as easy as it was, now depending on an array of size calculations and CSS injection to account for all the device screen sizes. On the good side, I’m having no problem with device’s capacity to handle Valo. Processors and memory seem to be up to the task these days.

Thanks for the interest.

With the elements addon (!addon/elements-add-on
), it should also be a matter of minutes to get a native date picker, i.e. . See the example in