Search code examples
buttonalignmentvaadin

Buttons alignment does not work in Vaadin v.23

I need to place three buttons at the bottom of my page and I want them to be in the left corner, center and right corner respectively. I did create HorizontalLayout into which I added my button. I am fighting with all kinds of alignments for over three days, but whatever I do, buttons remains in the left corner. Here is my code:

    HorizontalLayout bottomLayout = new HorizontalLayout();
    bottomLayout.setWidthFull();
    bottomLayout.setHeight("82px");
    bottomLayout.add(buttonA, buttonB, buttonC);
   //  bottomLayout.setAlignItems(Alignment.STRETCH);
    bottomLayout.setAlignSelf(Alignment.END, buttonC);
    bottomLayout.setAlignSelf(Alignment.START, buttonA);
    bottomLayout.setAlignSelf(Alignment.CENTER, buttonB);

Please do tell me what I am doing wrong and how to correct it. Also, all my buttons are 80px high and while first two looks vertically aligned to each other, the third one looks couple pixels higher. How do I align them vertically as well?

Solution

  • What you're looking for is bottomLayout.setJustifyContentMode(JustifyContentMode.BETWEEN);

    Explainer:

    Layouts are 2-dimensional, so the elements in them can be aligned in two ways: horizontally and vertically.

    In CSS FlexBox layout model terminology

    • justification refers to alignment along the layout's direction (horizontally for horizontal layouts)
    • alignment refers to "cross-axis" alignment (vertically for horizontal layouts)

    So setAlignItems and setAlignSelf both refer to the alignment above, wheras setJustifyContentMode refers to justification above.

    I have to admit it's really not the most intuitive API. It is like that because it tries to follow the CSS FlexBox model and terminology.