CODEWITHSUNDEEP
javahtmlcssvaadinvaadin7
Syncretic
Syncretic

Reputation: 75

Vaadin layout expansion

Using Vaadin 7, I'm trying to accomplish a layout similar to other questions asked here, yet with one major difference:

I want my content layout to fill out the remaining space only if there is not enough content within. This will result in a layout such the the following:

without content

I also want the layout to be able to do the following:

When I add more content, enough to fill the content layout area, and proceed to add more, the footer will stay in place, scrollbar appears and the content added after will be added below the footer.

In addition to the first picture, adding enough content should result in the following layout:

enter image description here

Upvotes: 1

Views: 162

Answers (1)

qtdzz
qtdzz

Reputation: 121

I don't know whether I understand your question correctly or not but lets try my code and see if it helps:

    final VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    layout.setSpacing(true);
    layout.setStyleName("flow_visible");
    final HorizontalLayout navBarLayout = new HorizontalLayout();
    final VerticalLayout contentLayout = new VerticalLayout();
    final VerticalLayout spacingLayout = new VerticalLayout();
    final HorizontalLayout footerLayout = new HorizontalLayout();
    String dummyText = "TDummy text";
    navBarLayout.addComponent(new Label("Navigation bar"));
    navBarLayout.setStyleName("navbar");
    navBarLayout.setWidth("100%");

    contentLayout.setSizeFull();
    contentLayout.setSpacing(true);
    Button addButton = new Button("Add more content",
            (Button.ClickListener) clickEvent -> {
                contentLayout.addComponent(new Label(dummyText),
                        contentLayout.getComponentCount() - 2);
            });
    contentLayout.addComponent(addButton);
    for (int i = 0; i < 6; i++) {
        contentLayout.addComponent(new Label(dummyText));
    }
    spacingLayout.setSizeFull();
    contentLayout.addComponent(spacingLayout);
    contentLayout.setExpandRatio(spacingLayout, 1f);

    footerLayout.addComponent(new Label("Footer"));
    footerLayout.setStyleName("footer");
    footerLayout.setWidth("100%");
    contentLayout.addComponent(footerLayout);

    layout.addComponent(navBarLayout);
    layout.addComponent(contentLayout);
    layout.setSizeFull();
    layout.setExpandRatio(contentLayout, 1f);

How this code works: http://i.imgur.com/1HH1wm7.gif

Upvotes: 1

Related Questions