Basic Layout Problem

Flow
1

Hello, I’m new to Vaadin and learning.

Starting with simple layouts, I’m running into a frustrating problem.

I have created a HorizontalLayout, where I will add multiple components I create that are of VerticalLayout. The intent is to create a a row of multiple columns.

	HorizontalLayout horizontalLayout = new HorizontalLayout();

    VerticalLayout v1 = new VerticalLayout();
    v1.add("up");
    v1.add("down");

    horizontalLayout.add(v1);

The problem is, both ‘up’ and ‘down’ in the above example are next to each other in a horizontal layout fashion (and with no spacing between them). Is this intended? Am I missing something fundamental?

2

Is this intended?

Yes, it is intended behavior. When you use layout.add(“text”), i.e. String parameter, the String is not added as component (or as element in html lingo) to the layout, but as text content to ::before. Hence you will see the added texts as continuous text.

Instead if you wish to add these texts as components you should do it like

@Route("simple")
public class SimpleView extends HorizontalLayout {
    public SimpleView() {
        VerticalLayout v1 = new VerticalLayout();
        v1.add(new Span("up"));
        v1.add(new Span("down"));

        add(v1);        
    }
}

Note, if your actual intent is not to add texts to layout, but just typical Vaadin components, the problem is solved automatically by that.

3

This makes a lot of sense, thank you! I’m almost embarrassed about how long I banged my head against this:).