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.
Can't design layout properly
Hello everyone,
I design page with VerticalLayout, which has two objects - label and a component (panel)
This is how i expect to make it look like (see final_bmp.png) attachment
And this is how it looks like (see looks_like.png) attachment
The code, how i archieved this (please note that singleton named 'componentHelper' only used to make certain components and nothing else):
@UIScope
@SpringView(name=ViewTokens.HOME)
public class SplashScreen extends VerticalLayout implements View {
private static final float PANEL_WIDTH = 320;
private static final float PANEL_HEIGHT = 140;
private static final float BUTTON_WIDTH = 270;
private static final float BUTTON_HEIGHT = 70;
private ComponentHelper componentHelper;
private Panel panel;
private VerticalLayout formLayout;
private Label welcome;
private Button toLoginPage;
public SplashScreen() {
initComponents();
buildSplashView();
}
protected void initComponents() {
componentHelper = ComponentHelper.getInstance();
panel = componentHelper.createPanel("", PANEL_WIDTH, PANEL_HEIGHT);
welcome = componentHelper.createLabel("Welcome");
formLayout = componentHelper.createVerticalLayout();
toLoginPage = componentHelper.createFriendlyButton("To Login Page", BUTTON_WIDTH, BUTTON_HEIGHT);
toLoginPage.addClickListener(this::redirect);
}
private void buildSplashView() {
setMargin(new MarginInfo(true ,true ,true ,true));
setSpacing(true);
setHeight(100, Unit.PERCENTAGE);
setWidth(100, Unit.PERCENTAGE);
addComponent(welcome);
setComponentAlignment(welcome, Alignment.MIDDLE_CENTER);
addComponent(panel);
formLayout.addComponent(toLoginPage);
formLayout.setComponentAlignment(toLoginPage, Alignment.MIDDLE_CENTER);
panel.setContent(formLayout);
panel.setStyleName(ValoTheme.PANEL_BORDERLESS);
setComponentAlignment(panel, Alignment.MIDDLE_CENTER);
setHeight(100, Unit.PERCENTAGE);
}
Please help me.
Would be great, if someone also explained the logic of layouting ( i read Vaadin Book before asking this)
Labels are per default 100% wide with left-aligned text. Call welcome.setSizeUndefined() to make the Label just take the space becessary for its contents.