CODEWITHSUNDEEP
alignmentvaadingrid-layoutvaadin7
Baloolaoo
Baloolaoo

Reputation: 63

Custom width of Vaadin GridLayout

I'm working with a 2x2 GridLayout in Vaadin. 

    gridLayout = new GridLayout(2, 2);
        gridLayout.setWidth(100, Unit.PERCENTAGE);
        gridLayout.setMargin(true);
        gridLayout.setSpacing(true);

The cell in the upper-left corner contains a simple label aligned to the right. Upper-right cell contains a textfield aligned to the left. The second row simply contains a label below the textfield.

    gridLayout.addComponent(captionLabel, 0, 0);
    gridLayout.addComponent(inputField, 1, 0);

    gridLayout.setComponentAlignment(captionLabel, Alignment.MIDDLE_RIGHT);
    gridLayout.setComponentAlignment(inputField, Alignment.MIDDLE_LEFT);

Now I want to have both columns within the grid to have size set to 50% to have the whole layout aligned in the middle of my page - now it is slightly shifted to the left side and I can not figure out why...

Vaadin's wiki-page shows a related article, but I can not figure out how to work with it. Seems to be deprecated, because I can not access #getColumn(); - method?! https://vaadin.com/wiki/-/wiki/10674/Configuring+Grid+column+widths

For further info: The GridLayout is added as a separate component to a VerticalLayout.

Upvotes: 0

Views: 1541

Answers (2)

Baloolaoo
Baloolaoo

Reputation: 63

Solved it by adding a HorizontalLayout-wrapper for the left column containing the label. The right colum contains a VerticalLayout with all other components.

    Label captionLabel = new Label(localized);
    captionLabel.setSizeUndefined();
    HorizontalLayout wrapper = new HorizontalLayout();
    wrapper.setSizeFull();
    wrapper.addComponent(captionLabel);
    wrapper.setComponentAlignment(captionLabel, Alignment.TOP_RIGHT);
    [...]        
    gridLayout.addComponent(wrapper, 0, 0);
    gridLayout.addComponent(inputLayout, 1, 0);
    gridLayout.setColumnExpandRatio(0, (float)0.5);
    gridLayout.setColumnExpandRatio(1, (float)0.5);

Upvotes: 0

André Schild
André Schild

Reputation: 4754

You can influence the column width's with the grid.setColumnExpandRatio(1, 1); method.

If you wish to have both use 50% of the total width, just set the expand ration to the same value on both columns.

Please also note this: A layout that contains components with percentual size must have a defined size!

If a layout has undefined size and a contained component has, say, 100% size, the component would fill the space given by the layout, while the layout would shrink to fit the space taken by the component, which is a paradox. This requirement holds for height and width separately.

Book of Vaadin

Upvotes: 1

Related Questions