Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Problem with Absolute Layout
Hi,
I want to set the height and width of Absolute layout in percentage because I have to resize the layout based on certain scenarios.
I researched a lot, and found that Absolute Layout supports the height and width only in pixel.
Please let me know if I am missing anything.
Thank you
Hi,
You're not missing anything. AbsoluteLayout has only fixed pixel dimensions. You might want to look into CSSLayout instead?
-Olli
Olli Tietäväinen: Hi,
You're not missing anything. AbsoluteLayout has only fixed pixel dimensions. You might want to look into CSSLayout instead?
-Olli
I found that it's not supported in Vaadin 8 to set height/width for child components of absolute layout, Am I right?
Hi,
Take a look at the docs here: https://vaadin.com/docs/v8/framework/layout/layout-absolutelayout.html
That should clarify how AbsoluteLayout works in Vaadin 8. If you still have any questions, let us know.
Best regards,
Olli
Olli Tietäväinen: Hi,
Take a look at the docs here: https://vaadin.com/docs/v8/framework/layout/layout-absolutelayout.html
That should clarify how AbsoluteLayout works in Vaadin 8. If you still have any questions, let us know.
Best regards,
Olli
I had some problems with backward compatibility after migration to vaadin 8, but now it's solved
Probably it would be helpfull to some other developers.
Example of problematical code:
VerticalLayout topContent = new VerticalLayout();
topContent.setSizeFull();
//.. some code ..
VerticalLayout bottomContent = new VerticalLayout();
bottomContent.setSizeFull();
//.. some code ..
AbsoluteLayout root = new AbsoluteLayout();
root.addComponent(topContent, "left: 0px; top: 0px; right: 0px; height: 400px;");
root.addComponent(bottomContent, "left: 0px; top: 400px; right: 0px; height: 400px;");
Solution:
VerticalLayout topContent = new VerticalLayout();
topContent.setHeight("400px");
//.. some code ..
VerticalLayout bottomContent = new VerticalLayout();
bottomContent.setHeight("400px");
//.. some code ..
AbsoluteLayout root = new AbsoluteLayout();
root.addComponent(topContent, "left: 0px; top: 0px; right: 0px;");
root.addComponent(bottomContent, "left: 0px; top: 400px; right: 0px;");
Yes, good point, the API has changed so that the AbsoluteLayout works more like a canvas - the components have their own defined height/width and AbsoluteLayout takes care of positioning them correctly.
-Olli