Handle Auto-Zoom on a Tablet

General
1

Hey everyone,

I made an app which main use is to display the time and other information. This App is running on several Tablets (Motorola Xoom) and is deployed on a tomcat 7. I also made it to be endless by automaticaly reloading the page when the session is expired/server restarts.

The only problem i have is that the auto-zoom-(out) is sometimes causing a part of the layout being not displayed. How this happens: The size of my main layout is 1280x745. When you open the app on the tablet it first shows the part roughly around 750x500 (just a wild guess). Then it automaticaly zooms out to fit the size of the app which causes it to display only the part in 1280x500. The bottom part is cut off. In my Vaadin 6 version i had a workaround which wasn’t really reliable (Sometimes after a server restart the bottom was still cut off). Now i updated my project to Vaadin 7.0.3 and for that redid my layout-setup so that i thought it would work better but now it just doesn’t work at all.

My layout setup:


UI main = UI.getCurrent()
main.setSizeFull();
main.setHeight("745px");
main.setWidth("1280px"); //If i don't set the width/height the tablet won't autoscroll at all
main.setImmediate(true);

CssLayout css_main = new CssLayout();
css_main.setImmediate(true);
main.setContent(css_main);
main.getContent().setSizeFull();
	
vl_pnlmain = new VerticalLayout();
vl_pnlmain.setWidth("1275px");
vl_pnlmain.setHeight("745px");
vl_pnlmain.setStyleName("rbomain"); //style just sets a background-image
vl_pnlmain.setImmediate(true);
css_main.addComponent(vl_pnlmain);

//all the other content is added to vl_pnlmain

In my Vaadin 6 version i had a panel between the csslayout and the verticallayout which worked at first but then i had the problem that you were able to scroll the app to a point where you can’t see anything from the layout anymore. The reason was that the Scrollable inside the Panel had a much larger height then its content. I tried to solve that problem by adding a style to the panel which sets the scrollable’s height to 745px but that just causes the cut-off-issue. My workaround there was to use a refresher to set the style after 2 seconds when the tablet normally finished zooming out. The problem there was that it sometimes still cut off the bottom.

Did anyone experience similar problems using tablets and does anyone know a better workaround to my problem?

Best regards,
M R

2

So i just went over my code again and made it so that the bottom part of the UI won’t get cut off but extreme scrolling is possible.

The code now looks like this


UI main = UI.getCurrent()
main.setSizeFull();
main.setImmediate(true);

vl_pnlmain = new VerticalLayout();
vl_pnlmain.setWidth("1273px");
vl_pnlmain.setHeight("745px");
vl_pnlmain.setStyleName("rbomain");

main.setContent(vl_pnlmain);

Like i said now everything is visible but you are able to scroll extremly far to the right and to the bottom of the UI.

I’m guessing the problem comes from the Tablet not updating the UI size properly after auto-zooming.

I’m gonna try to elaborate on my theory:

Initial Load:
vl_pnlmain has the size 1273x745
UI has only about 3/4 of the verticallayout’s size;

After Auto-Zoom:
vl_pnlmain or it’s content “shrinks”/“zooms” down to the 3/4 size of the tablet
UI still thinks it’s content is 1273x745 big so it allows the user to scroll the entire space.

Does anyone know how i could solve this issue?

3

I want to add that i wasn’t able to reproduce this problem in any of my desktop browsers (Chrome, Firefox, IE).