size calculation bug with viewport


I have a problem and I’ve finally found a source…

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.

Any suggestion how to make it work together?


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() {

        public void sessionInit(SessionInitEvent event) throws ServiceException {
            VaadinSession session = event.getSession();
            session.addBootstrapListener(new BootstrapListener() {

                public void modifyBootstrapPage(BootstrapPageResponse response) {
                            .attr("name", "viewport")
                            .attr("content", "initial-scale = 1.0,maximum-scale = 1.0");

                public void modifyBootstrapFragment(BootstrapFragmentResponse response) {}


    protected void servletInitialized() throws ServletException {
        VaadinService service = getService();


it works, thank you :slight_smile:

There is a recent addition to the API for 7.4, so if you are using the latest 7.4 snapshots, you can simply say

@Viewport("initial-scale = 1.0,maximum-scale = 1.0") on your UI class or use @ViewportGeneratorClass for more complex cases.

we are not on latest Vaadin at the moment, but thanks for tip anyway :slight_smile: maybe later