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