可滚动的vaadin视图以显示页面中的所有组件

Question

如何使用布局组件（vaadin新手）在vaadin中实现html网页

现在我在UI组件中添加的任何组件只有一些组件出现在浏览器中......

没有滚动选项可以查看我在层次结构

中添加的其他组件

public class LoginView extends CustomComponent implements View,
    Button.ClickListener {

    public static final String NAME = "login";

    private TextField user;

    private PasswordField password;

    private Button loginButton;
    NativeSelect select_role;

    private HorizontalLayout fieldsBottomPanel;

    private VerticalLayout fieldsLeftPanel;

    private GridLayout loginPanelGrid;

    private VerticalLayout filedsTopPanel;

    private VerticalLayout loginFormLayout;

    private Label top_header_panel;

    private VerticalLayout virtualKeyboard;

    private VerticalLayout fieldsRightPanel;

    private VerticalLayout footer;

    private VerticalLayout header;

    private Window page;



    public LoginView() {
        setSizeFull();  
        addTopPanelToLoginForm();
        addLeftPanelToLoginForm();
        addBottomPanelToLoginForm();
        addRightPanelToLoginForm();
        addLoginFormToPage();
        addFooterToPage();
        addHeaderToPage();

        VerticalLayout viewLayout = new VerticalLayout(header,loginFormLayout,footer);
        viewLayout.setComponentAlignment(loginFormLayout,
                Alignment.MIDDLE_CENTER);
        viewLayout.setStyleName(Reindeer.LAYOUT_WHITE);

        setCompositionRoot(viewLayout);
    }

    public void addHeaderToPage(){
        header = new VerticalLayout();
        header.setStyleName("header-login");
    }


    public void addFooterToPage(){
        footer = new VerticalLayout();
        footer.addStyleName("footer-login");
    }
}

Answer 1

您必须将内容放入Panel中，因为布局不会提供滚动条。

  

[...]如果 [Panel] 具有固定或百分比大小且其内容太大而无法放入内容区域，则会出现特定方向的滚动条。 [...]

来自Vaadin书籍章节6.6.1

看一下这个帖子here。