scrollable vaadin view to display all the components in the page

Question

How can one achieve a html webpage in vaadin using layout components (new to vaadin)

Right now whatever components i add in UI Component only some components appear in the browser...

there is no scrolling option to see other components i added below in the hierarchy

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

i need website like default scrolling when there is more content available ... — aps109, Apr 10 '14 at 11:52

score 5 · Accepted Answer · edited May 23 '17 at 10:34

5

You have to put your content into a Panel because layouts don't provide scrollbars.

[...] if it [Panel] has a fixed or percentual size and its content becomes too big to fit in the content area, a scroll bar will appear for the particular direction. [...]

From the Vaadin Book Chapter 6.6.1

Have a look at this thread here.

edited May 23 '17 at 10:34

Community

1
1

answered Apr 10 '14 at 12:22

nexus

2,937
3
17
22

scrollable vaadin view to display all the components in the page

1 Answers1