How to make vaadin not show scrollbars (when using setSizeFull for main layout)

Question

Given the following example vaading application:

package net.kerba.vaadin7interface;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.label.ContentMode;
import com.vaadin.ui.*;

import javax.servlet.annotation.WebInitParam;
import javax.servlet.annotation.WebServlet;

/**
 * Created by IntelliJ IDEA.
 * Date: 19.11.13
 * Time: 20:48
 */

@Theme("runo")
public class MainUi extends UI {

    @Override
    protected void init(VaadinRequest request) {

        GridLayout main = new GridLayout();
        main.setSizeFull();
        main.setMargin(false);

        Panel panel = new Panel("Working area");
        main.addComponent(panel, 0, 0);

        // magic goes in 2 lines below
        panel.setWidth("500px");
        panel.setHeight("300px");

        panel.setContent(new Label("foobar");", ContentMode.PREFORMATTED));

        main.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);
        setContent(main);
    }

    @WebServlet(name = "vaadinServlet",
            urlPatterns = {"/app/*", "/VAADIN/*"},
            asyncSupported = false,
            initParams = {@WebInitParam(
                    name = "widgetset",
                    value = "com.vaadin.DefaultWidgetSet"
            )}
    )
    @VaadinServletConfiguration(productionMode = false, ui = MainUi.class)
    public static class Servlet extends VaadinServlet {

    }
}

When I use% for width and height:

panel.setWidth("50%");
panel.setHeight("50%");

I get both scrollbars:

When I use pixels for width and height:

panel.setWidth("500px");
panel.setHeight("300px");

Both scroll bars disappeared:

How can I use% for width and height and make Vaadin not show these scrollbars?

Vaadin 7.1.8

Answer 1

, , , , . panel / CSS, . , , , - JS , , JS .

Answer 2

, GridLayout

main.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);

gridlayout-slot , 100% - , 50% - ...

, VerticalLayout . CustomLayout.

Answer 3

, . , , , :

1

2

main.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);

, .

• You can either create another panel with different specifications, or use a virtual view to work with it, i.e. A grid layout that will be used only for formatting indents and its effective use.
• Use HGap, VGap, and then set the alignment. Refer to example
• Use a completely different layout completely, some changes to the current specification to accommodate the layout.