Expand Ratio to align the component

Hi,
i m using only vertical and horizontal layout and to align the components in that i am using expand ratio.But using expand ratio i am unable to align the component as i want it to be.Can anyone please help me to sort this problem out.

I have attached the example copy which I have tried aligning using expand ratio.
In which I want button ‘h’ just exactly below the button ‘d’ which i am unable to get it using expand ratio.
I want button ‘e’ just below the button ‘a’,button ‘f’ just below the button ‘c’,button ‘h’ just below the button ‘d’.
and one more problem is upon selecting some option another button should be added just below button ‘b’,and all other button should remain in same place as I have placed.Is this is possible??

Please do reply.

Thanks in advance :slight_smile:

15401.png

GridLayout is exactly what you want in that case, then you get multiple lines aligned evenly.

Remember that additionally to setExpandRatio, you can also use setComponentAlignment to adjust positions.

But if you really want to use VerticalLayouts and HorizontalLayouts, and just want to use expand ratios, you have too options:

  1. Give the first button in the second row double the expand ratio to the other buttons, which means it fills up the second button spot as well. When you add the additional button, you change the first button’s expand ratio to be the same as the other buttons. You can also add the second button on UI construction and toggle the visibility.

  2. Add a invisible component in the place of the second button in the second row, like an empty label or a CssLayout. Then switch out the component to the button when you press the other button.

Here’s the code for the first case:

package com.jensjansson;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

public class MyVaadinUI extends UI {

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class)
    public static class Servlet extends VaadinServlet {
    }

    @Override
    protected void init(VaadinRequest request) {

        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);

        layout.setWidth("500px");

        HorizontalLayout firstRow = new HorizontalLayout();
        final HorizontalLayout secondRow = new HorizontalLayout();
        layout.addComponent(firstRow);
        layout.addComponent(secondRow);
        firstRow.setWidth("100%");
        secondRow.setWidth("100%");

        Button a = new Button("a");
        Button b = new Button("b");
        Button c = new Button("c");
        Button d = new Button("d");
        final Button e = new Button("e");
        final Button f = new Button("f");
        Button g = new Button("g");
        Button h = new Button("h");

        firstRow.addComponent(a);
        firstRow.addComponent(b);
        firstRow.addComponent(c);
        firstRow.addComponent(d);
        secondRow.addComponent(e);
        secondRow.addComponent(f);
        secondRow.addComponent(g);
        secondRow.addComponent(h);
        f.setVisible(false);
        secondRow.setExpandRatio(e, 2);
        secondRow.setExpandRatio(f, 1);
        secondRow.setExpandRatio(g, 1);
        secondRow.setExpandRatio(h, 1);

        b.addClickListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                if (f.isVisible()) {
                    f.setVisible(false);
                    secondRow.setExpandRatio(e, 2);
                } else {
                    f.setVisible(true);
                    secondRow.setExpandRatio(e, 1);
                }
            }
        });
    }
}

Thanku sooo much for your reply Jansson :slight_smile: