How to position a footer

Dear Vaadin community,

I have this little problem, i hope you will have a solution :

Step 1 : I create a VerticalLayout in the main windows
(ok)
:

           mainwindow.setSizeFull();
	VerticalLayout layout = new VerticalLayout();
	setCompositionRoot(layout);
	layout.setSizeFull();

Step 2 : i create a top banner
(ok)
:

            Panel bannerTop = new Panel("");
            bannerTop .setWidth("100%");
	     ...
	layout.addComponent(bannerTop);

Step 3 : i create some buttons, one per line
(ok)
:
button1 = new Button(“some text”, this, “open2ButtonClick”);
layout.addComponent(button1);
layout.setComponentAlignment(totobutton, Alignment.MIDDLE_CENTER);

Step 4 : i create a footer (green line in the attached screenshot)
(not ok)

	Label elabel = new Label("<center><p style=\"background-color:rgb(1, 147, 213);font-size:10px;color:rgb(255,255,255)\">+
	"this web page is created with VAADIN</p><center>",Label.CONTENT_RAW);
	layout.addComponent(elabel);							      
	[b]

layout.setExpandRatio(elabel, 1);
layout.setComponentAlignment(elabel, Alignment.BOTTOM_CENTER)
[/b];
=> i was thinking these 2 last lines move the Label in the bottom of the web page, but it is not the case. It seems they are ignored.
Could you please tell me where i am wrong ?
12560.jpg

VerticalLayout takes no more space than it has too, so I guess there won’t be an easy way, using the APIs. It might be easiest to just give the footer-label a stylename and add appropriate CSS.

Thank you for your reply

I do not know how to use CSS with Vaadin (and i never used CSS).
Is there a simple example of Css-Vaadin code ?

Eric

Unfortunately the bootstrapping of custom CSS is a bit complicated for the first time. Look at the book and read about Widgetsets … don’t have enough time left to prepare an example, sorry.

Ok, thank you Tobias


Suggestion to the Vaadin Team : it would be a good idea to create a Footer object !

Eric

Hi Eric,

It shouldn’t require any custom CSS to achieve what you’re trying to do.

But judging from the setCompositionRoot(layout); it seems you’re using a CustomComponent somewhere in the component hierarchy, and your vertical layout is inside that. So make sure the CustomComponent itself is also 100% high, otherwise the layout inside it will be something other than 100% high (and looking at the screenshot it looks like it is height=auto).

You can add ‘?debug’ after the URL of your app, and click the ‘AL’ button (Analyze Layouts), it should point out any issues in your layout structure.

Jouni,

Yes, there is a CustomComponent because i use the example given in the 4.3.1 section of the Vaadin book as a starting point for my project.
public class WindowOpener extends
CustomComponent
implements Window.CloseListener {

I love the “?debug”. Here is what he says (colors are in relation with colored words in the code below) :


  • Window
    /e6f7d2 “Myproject Application” (height: MAIN WINDOW)
    • VerticalLayout/1a42792 (height: RELATIVE, 100.0 %)

      • WindowOpener
        /1bf3d87 (height: UNDEFINED)

        • VerticalLayout
          /5dd582 (height: RELATIVE, 100.0 %)
          [color=#ea2438]
          Layout problem detected: A component with relative height needs a parent with defined height.
          Relative sizes were replaced by undefined sizes, components may not render as expected.

[/color]

public class MaquetteVaadinAppli extends Application {
	private static final long serialVersionUID = 1L;

	@Override
	public void init() {
		final [color=#a0335b]
Window 
[/color]mainWindow = new Window("Myproject Application");
		//mainWindow.setWidth(245);
		setMainWindow(mainWindow);
		mainWindow.getContent().setSizeFull();
		mainWindow.addComponent(new WindowOpener("Window Opener", mainWindow));
	}
}

public class [color=#5b4bc5]
WindowOpener 
[/color]extends CustomComponent implements Window.CloseListener {
public WindowOpener(String label, Window main) {  //constructeur
		mainwindow = main;
		mainwindow.setSizeFull();
		
		[color=#3fa338]
VerticalLayout 
[/color]layout = new VerticalLayout();
		setCompositionRoot(layout);
		layout.setSizeFull();
                Panel bannerDuHaut = new Panel("");
                    ...
                layout.addComponent(bannerDuHaut);
            ...


I do not know what to do to set the size of CustomComponent;

In your WindowOpener class constructor just call setSizeFull() or setHeight(“100%”); and you should be ok.

It works fine, thank you Jouni :grin:
(i also added ((VerticalLayout)mainWindow.getContent()).setSizeFull() into the init() method)