As we need a responsive design and smartphone optimization, we need a viewport meta tag, so I’ve found a java script which adds a meta tag to the header. I run it in the UI.init() method. And it works, smartphone uses the layout we need.
getPage().getJavaScript().execute(
"document.head.innerHTML += "
+ "'<meta name=\"viewport\" content=\"initial-scale = 1.0,maximum-scale = 1.0\">'");
But there is a strange problem when using it.
As you can see on “before.png” attachment, there is a wrong width calculated by Vaadin. Strange part is that it only happens when it is initial page load. I mean when you enter the application for the first time after page reload (F5). If you enter it from other view (we are using Navigator), it is calculated correctly, see “after.png attachment”. Also when we hide the panel (panel is collapsible by clicking on the header) and display it again, it is calculated correctly again. The problem is on tables, I haven’t noticed it on any other component.
maybe it occurs because the view port tag is not available at the beginning of the page load and size calculation, because it is added using javascript. When you hide and show the table the viewport is already there so the calculation works.
Try to modify your bootstrap page like this so it will be available instantly when the page loads:
public class MyServlet extends VaadinServlet {
private final SessionInitListener sessionInitListener = new SessionInitListener() {
@Override
public void sessionInit(SessionInitEvent event) throws ServiceException {
VaadinSession session = event.getSession();
session.addBootstrapListener(new BootstrapListener() {
@Override
public void modifyBootstrapPage(BootstrapPageResponse response) {
response.getDocument().head()
.appendElement("meta")
.attr("name", "viewport")
.attr("content", "initial-scale = 1.0,maximum-scale = 1.0");
}
@Override
public void modifyBootstrapFragment(BootstrapFragmentResponse response) {}
});
}
};
@Override
protected void servletInitialized() throws ServletException {
super.servletInitialized();
VaadinService service = getService();
service.addSessionInitListener(sessionInitListener);
}
}
