Hi,
I am struggeling with a simple layout problem.
What I want, is a simple Horizontal Layout with a header on top and a Footer on the bottom. The page wont be scrollable.
The middle part shall simply be empty.
The Question is, how can i fix the Footer to the very bottom? The Header is fine and stays on top.
I am implementing this Layout as a Custom Component, which looks like the following.
Note:
Header is another custom Component, basically a HorizontalLayout with some menubar etc.
Footer is just a Label.
The style “mainlayoutstyle” just sets a background color and a transparent background image.
Selecting a MenuItem shall simply add a SubWindow. This part is not a problem.
public class MainLayout extends CustomComponent{
VerticalLayout mainLayout = new VerticalLayout();
Header header = new Header();
Footer footer = new Footer();
public MainLayout(){
setSizeFull();
setStyle("mainlayoutstyle");
mainLayout.addComponent(header);
mainLayout.addComponent(footer);
mainLayout.setComponentAlignment( header, Alignment.TOP_LEFT );
mainLayout.setComponentAlignment( footer, Alignment.BOTTOM_LEFT );
setCompositionRoot(mainLayout);
}
}
In my UI class, i do it like that:
public class MyVaadinUI extends UI
{
MainLayout mainLayout = new MainLayout();
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, widgetset = "com.example.project.AppWidgetSet")
public static class Servlet extends VaadinServlet
{
}
@Override
protected void init( final VaadinRequest request )
{
setContent( mainLayout );
}
}
I already tried adding another vertical layout in the middle, or a Panel. but it did not work. The components simply kept beeing small.
I am sure I am missing something somewhere and hope to find an answer here.
This should help:
public MainLayout(){
setSizeFull();
setStyle("mainlayoutstyle");
mainLayout.addComponent(header);
VerticalLayout vl_middle= new VerticalLayout();
vl_middle.setSizeFull();
mainLayout.addComponent(vl_middle);
mainLayout.addComponent(footer);
mainLayout.setExpandRatio(vl_middle, 1F);//component tries to fill all available space
}
Code is untested and maybe you could even do it without using the VerticalLayout by setting a fixed/undefined size for the content of the header and setting it’s expandratio to 1f.
What i get then is:
a Header on the Top (clear, added first to the Vertical Layout), and the Footer sticked to the header. The middle_vl is not visible at all. As its height is somehow set to 0.
But setting the style with the background works fine.
When i add a label to the vl_middle, then it is shown, but the footer sticks right below the label.
I can see in Chrome DeveloperTools, that the height of this middle layout is not set. Setting it to 100% in code does not help. But setting the height to e.g. 500px helps and my Footer is show on another position.
I would like to avoid setting it to real pixelsizes.
Is there a way to really force this layout to use all available space?
Most likely some layout above these layouts does not have 100% height. The middle part should/must have 100% size to get the result you want, and the code Marius provided looks correct to me.
Try also the “analyze layouts” functionality of the debug console (in Vaadin 7.1, add “?debug” to the URL and click the “Check layouts for potential problems” icon on the “Examine component hierarchy” tab).
I tried it right now, but it shows no top level problems. It only shows that this very vertical layout (vl_middle) is rendered to a zero sized container on the client side. Thats a very nice tool, by the way
BUT:
Together with this sentence: “Most likely some layout above these layouts does not have 100% height.” you put me on the right track:
Indeed, I had to set mainlayout.setSizeFull() for the Vertical Layout “mainLayout” in my MainLayout class. I guess, I was simply confused by having the same class name as for this layout.
only doing “setSizeFull()” on the class itself was not enough.
