Layout width and height

Vaadin 6 / 7 / 8 Framework UI
1

I’ve searched the forums trying to find an example of this and everything I’ve tried doesn’t seem to work so I apologize for the very ‘newbie’ question.

Vaadin Version: 6.6.2
OS: Mac Snow Leopard
Browser: Firefox 3.5.6
Java: 1.6
Tomcat: 6.0.20

My application has a header and main layout implemented with a Vertical layout. I’ve set the width and height for both of these layouts and I’m trying to make sure that the header layout is only 150 pixels in height. In the screenshot attached I think you’ll see my problem. I want the main (where the table resides) layout pushed upward, making the header layout smaller, about 150 pixels in height.

The width attribute seems to be working for me at 600 pixels and everything is center aligned which is great.

My other issue is that my ‘Profile’ button is not top_right aligned, it seems to be aligning to the bottom.

Please let me know what I’m doing wrong :slight_smile:



    private void initLayout() {
        VerticalLayout main = new VerticalLayout();
        VerticalLayout header = getHeaderLayout();
        CaseSelectorPanel panel = new CaseSelectorPanel(this);

        main.addComponent(header);
        main.addComponent(panel);

        main.setComponentAlignment(header, Alignment.TOP_CENTER);
        main.setComponentAlignment(panel, Alignment.BOTTOM_CENTER);
        main.setSizeFull();

        setMainWindow(new Window("Enforecment Tracking Tool", main));
    }



    private VerticalLayout getHeaderLayout() {
        VerticalLayout header = new VerticalLayout();
        header.setSizeFull();
        header.setWidth("600");
        header.setHeight("150");
        Embedded logo = new Embedded("", new ExternalResource("images/nmprc-logo.jpg"));
        Button profile = new Button("My Profile");
        
        header.addComponent(logo);
        header.addComponent(profile);

        header.setComponentAlignment(logo, Alignment.TOP_LEFT);
        header.setComponentAlignment(profile, Alignment.TOP_RIGHT);

        return header;
    }


    public CaseSelectorPanel(Application app) {
        setSizeFull();
        setHeight("100%");
        caseListTable.setWidth("600");

        caseListTable.setPageLength(4);

        caseListTable.setContainerDataSource(retrieveCases());
        caseListTable.setSelectable(true);
        caseListTable.setImmediate(true);
        layout.setSpacing(true);
        layout.addComponent(caseListTable);
        layout.setComponentAlignment(caseListTable, Alignment.BOTTOM_CENTER);
        layout.setSizeFull(); // need to call this to make the layout centered along with the line above

        addComponent(layout);
    }

11191.png

2

Hi, and welcome to the forums.

Some issues I spotted quickly:

header.setSizeFull();
header.setWidth("600");
header.setHeight("150");

This is partly redundant, as setSizeFull() == setWidth(“100%”), setHeight(“100%”). And although the sizing seems to default to pixels, it is always good to specify the unit eg. setWidth(“600px”).

main.setSizeFull();

When you set a layout to 100%, the components in the layout are given equally sized “slots” in which they are rendered. In this case, 50/50. What you might want to try out, is :

main.setExpandRatio(panel, 1.0f)

This way, the panel can expand to all the free space in the layout. For more info, check out the
relevant chapter
 in the Book of Vaadin.

3

Thank you so much for the quick reply Risto! Your help definitely got me closer to what I’m looking for!

I’ve removed the redundant header.setSizeFull(). That didn’t seem to have any affect so as you stated, that line was redundant. So the problem I still have here is the background color of the header is all gray instead of the white background that the main body has. I don’t want any borders or divisions to be displayed. The only way I’ve been able to get the all white background is using the setSizeFull() method. Any ideas here?

The setExpandRatio() worked great! Once again though, I needed to leave the main.setSizeFull() method in so I would get an all white background.

Lastly, that My Profile button won’t seem to align top right. Am I using the wrong layout for the header to accomplish what I’m looking for? Screenshot attached.
11192.png

4

Hi there.

The difference in color is that Panels, which you use as the main part of the application, has a little different theme than the rest of the application. If you want them to look the same then write panel.setStyleName(Panel.STYLE_LIGHT); That’ll remove the difference and it will look exactly the same as vertical layouts.

It is now easier to handle the background color all in once with css as all parts of the application looks the same - if it really is the whole white background that you want.

5

If you want the button to be right of the logo, you should use a HorizontalLayout instead of a VerticalLayout.

6

Thank you to both of you! After changing the Panel to a Layout, the backgrounds and borders went away and everything flows consistently. Thanks again!