Position Absolute Layout in the middle of screen

Vaadin 6 / 7 / 8 Framework UI
1

I am having some trouble positioning the Absolute-Layout component, i want to for any screen size displaying my application, have the .v-absolutelayout-wrapper in the middle of the screen


My set up

  1. I have in the main window Absolute-Layout (background) , inside this layout is another Absolute layout LoginPanel . I want to place the LoginPanel in the middle of the screen, i have tried this CSS + Positioning : top: 50%; left: 50%
.v-absolutelayout-loginpanel 
{
.v-margin-top: -255px;

.v-margin-left: -400px;
}

I am able to get it in the middle of my screen (17-inch wide) but if i move to another computer it is positioned incorrectly, how can i set the position of this component to be always in the middle of any screen?

2

Hard to say just like this.
But if you set the size of the LoginPanel using percentages, then your css with pixels computation will break (the percent size will depend on your screen size)

Why not using a VerticalLayout and using something like this ?

vl.setComponentAlignment(loginPanel, Alignment.MIDDLE_CENTER);
3

@Mathias

This is very helpful, do you have any idea how you i could use the same concepts to say “Place two Panels right next to each other”

I am trying to again dis-regarding any window size, create two .v-panel of different sizes to always be right next to each other and two rezise appropriately.

i have tried this



Panel left ; 
Panel right;

//Add both of these panels to a CSSLayout (or another layout)

/**CSS**/

.v-panel-left {


}

.v-panel-right{
float: right;
margin; 0 auto;
}
4

I am not sure what you mean, aren’t you reinventing the horizontal layout ?
Pseudo untested code :


Panel panel1 = new Panel();
panel1.setSizeFull();
Panel panel2 = new Panel();
panel2.setSizeFull();

HorizontalLayout layout = new HorizontalLayout();
layout .addComponent(panel1);
layout .addComponent(panel2);

//This is only needed if you don't want the panel to be 50%/50%
//See the book for how expand ratios work
//layout.setExpandRatio(panel1, 2.0f);
//layout.setExpandRatio(panel2, 1.0f);