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

【问题标题】：scrollable vaadin view to display all the components in the page可滚动的 vaadin 视图以显示页面中的所有组件
【发布时间】：2014-05-24 02:23:09
【问题描述】：

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

现在无论我在 UI Component 中添加什么组件，只有一些组件出现在浏览器中......

没有滚动选项可以查看我在层次结构下方添加的其他组件

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");
    }
}

【问题讨论】：

有没有可以分享的截图或代码块？
当有更多可用内容时，我需要像默认滚动这样的网站...

标签： java web frameworks vaadin

【解决方案1】：

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

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

来自 Vaadin 书籍章节6.6.1

看看这个帖子here。

【讨论】：