buttons are not aligned properly in grid layout

Vaadin 6 / 7 / 8 Framework UI
1

The buttons in Grid Layout are shown below the text areas. How do I align them to be on the same level?

I see the grid row’s height is 28 px, while the text area height is 22, so that’s why the text area is shown at the top of the row (or buttons seem to be shown at the bottom)

Here’s the code

    

    public class ProjectPanel extends Panel ...

    private static final String TEXT_AREA_WIDTH = "120px";

    private void buildUI() {
        GridLayout grid = new GridLayout(4, 2);
        addComponent(grid);

        grid.setSpacing(true);

        projectKeyLabel = new Label("Project key:");
        grid.addComponent(projectKeyLabel);

        projectKey = new TextField();
        projectKey.setPropertyDataSource(projectKeyProperty);
        grid.addComponent(projectKey);
        projectKey.setWidth(TEXT_AREA_WIDTH);

        Button infoButton = EditorUtil.createButton(...   );
        infoButton.setEnabled(projectInfoCallback != null);
        grid.addComponent(infoButton);

        Button showProjectsButton = EditorUtil.createLookupButton(...   );
        showProjectsButton.setEnabled(projectProvider != null);
        grid.addComponent(showProjectsButton);

        if (queryValueProperty != null) {
            queryValueLabel = new Label("Query ID:");
            grid.addComponent(queryValueLabel);
            queryValue = new TextField();
            grid.addComponent(queryValue);
            queryValue.setWidth(TEXT_AREA_WIDTH);
            queryValue.setPropertyDataSource(queryValueProperty);

            Button showQueriesButton = EditorUtil.createLookupButton(....   );

            setQueryLabels();
            showQueriesButton.setEnabled(queryProvider != null);
            grid.addComponent(showQueriesButton);
        }
    }

12645.png

2

You can use GridLayout.setComponentAlignement(Component, int) for this.

3

Thank you, Thomas! I actually tried this before, but then it didn’t work. It turns out I need to set the same vertical alignment for all items in the row, while I was just trying to set it for the button only.
Once I set MIDDLE alignment for all items in the row, the problem is gone.

        grid.setComponentAlignment(queryValueLabel, Alignment.MIDDLE_LEFT);
        grid.setComponentAlignment(queryValue, Alignment.MIDDLE_CENTER);
        grid.setComponentAlignment(showQueriesButton, Alignment.MIDDLE_CENTER);

I’m guessing there is a way to do the same with CSS, but it’s ok for now.

Thank you!
12648.png