Alignment Problem with Flex

Hi,

In the following code the keypad verticallayout is aligned to the left.

How do I setup have the keypad verticallayout centered?

   private VerticalLayout loginPage() {
        VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();
        layout.setDefaultHorizontalComponentAlignment(FlexComponent.Alignment.CENTER);
        layout.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);

        Button enterBtn = new Button("Enter Public Area");
        layout.add(enterBtn);
        H4 pinNote = new H4("or use pin to login");
        layout.add(pinNote);

        VerticalLayout keypad = new VerticalLayout();
        HorizontalLayout keypadRow1 = new HorizontalLayout();
        Button btn1 = new Button("1");
        Button btn2 = new Button("2");
        Button btn3 = new Button("3");
        keypadRow1.add(btn1,btn2,btn3);
        keypad.add(keypadRow1);

        keypad.setAlignSelf(FlexComponent.Alignment.CENTER);
        layout.add(keypad);

        return layout;
    }

Hi,

You have different solution:
In your case, the keypad is center in the layout container but it’s width is 100% (by default VerticalLayout’s width is 100%) so it doesn’t work.
You can set the width to auto.

  keypad.setWidth("auto");
  //keypad.setAlignSelf(FlexComponent.Alignment.CENTER);

You can also do keep the width of the keypad and center its content.

keypad.setAlignItems(Alignment.CENTER);
//keypad.setAlignSelf(FlexComponent.Alignment.CENTER);

Thankyou, Jean-Christophe,

Perfect.

Paul

Was perfect for one row but when I try for 12 buttons they line up across the page, not as a keypad layout of 4 rows.

What do I do to fix this, this flex thing takes some time to appreciate the finer details?

        Button enterBtn = new Button("Enter Public Area");
        layout.add(enterBtn);
        H4 pinNote = new H4("or use pin to login");
        layout.add(pinNote);

        VerticalLayout keypad = new VerticalLayout();
        keypad.setWidth("auto");

        keypad.setDefaultHorizontalComponentAlignment(FlexComponent.Alignment.CENTER);
        keypad.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);

        HorizontalLayout keypadRow1 = new HorizontalLayout();
        keypadRow1.setWidthFull();
        Button btn1 = new Button("1");
        Button btn2 = new Button("2");
        Button btn3 = new Button("3");
        keypadRow1.add(btn1, btn2, btn3);
        keypad.add(keypadRow1);

        HorizontalLayout keypadRow2 = new HorizontalLayout();
        keypadRow2.setWidthFull();
        Button btn4 = new Button("4");
        Button btn5 = new Button("5");
        Button btn6 = new Button("6");
        keypadRow1.add(btn4, btn5, btn6);
        keypad.add(keypadRow2);

        HorizontalLayout keypadRow3 = new HorizontalLayout();
        Button btn7 = new Button("7");
        Button btn8 = new Button("8");
        Button btn9 = new Button("9");
        keypadRow1.add(btn7, btn8, btn9);
        keypad.add(keypadRow3);

        HorizontalLayout keypadRow4 = new HorizontalLayout();
        Button btnBack = new Button("<");
        Button btn0 = new Button("0");
        Button btnClear = new Button("c");
        keypadRow1.add(btnBack, btn0, btnClear);
        keypad.add(keypadRow4);

        layout.add(keypad);

Hi,

You are adding the buttons to the same keypad row like

keypadRow1.add(btn4, btn5, btn6);

instead of:

keypadRow2.add(btn4, btn5, btn6);

If you change this, it should be better.

The flex component is powerful but it’s not easy to understand it. I’m always opening this page when the flexbox is not doing what I want: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and play with the browser inspector.

No wonder I have trouble with flex, I need a brain transplant :slight_smile:

The misadventures with cut and paste.

Thanks for your reply and link to flex tricks.