如何讓vaadin不顯示滾動條（當使用setSizeFull作為主布局時）

Question

鑒於以下vaading示例應用程序：

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 {

    }
}

當我使用％作為寬度和高度時：

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

我得到兩個滾動條：

當我使用像素的寬度和高度時：

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

兩個滾動條都消失了：

如何使用％作為寬度和高度，並使Vaadin不顯示滾動條？

Vaadin 7.1.8

Answer 1

我發現通過擴展例如runo或reindeer引入你自己的主題總是付出代價。 然后，您可以在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);

使它位於屏幕的中間，即實際定義的面板的一半。

1. 您可以創建具有不同規格的另一個面板，也可以使用虛擬視圖來解決此問題，即。 一種網格布局，僅用於格式化縮進並根據您的使用進行有效定制。
2. 使用HGap，VGap然后設置對齊。 請參閱此示例
3. 完全使用完全不同的布局，對布局定位的當前規范進行一些更改。