Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Square cells in GridLayout (Vaadin 8.0.1)
Good day,
I'm a new in this framework. I want to create "bar ui" via GridLayout.
What I need:
I want to create Grid 3x3. Each of cell will contains different text fields (for example Label). I drawed it via java code. After launch I see columns with same width, but each row has own height. I do not want set "fixed" size of each cell - they should be dinamically resizable for different screens.
Is it possible create square cells with same height\width for all cells? Or GridLayout not for this situation?
I recommend to check this one
https://vaadin.com/docs/-/part/framework/layout/layout-gridlayout.html#layout.gridlayout.sizing.expanding
So if you set expand ratio of the each row to be 1, they shoud have a same height.
Tatu Lund: I recommend to check this one
https://vaadin.com/docs/-/part/framework/layout/layout-gridlayout.html#layout.gridlayout.sizing.expanding
So if you set expand ratio of the each row to be 1, they shoud have a same height.
Thank you for reply.
Each row has same height for all cells. But each row has own height. I want to create square cells with same height\width for all grid.
examples in attachments.
my code is
protected void init(VaadinRequest vaadinRequest) {
generateMatrix(3, 3);
setContent(mainGridLayout);
}
private void generateMatrix(final int columns, final int rows) {
mainGridLayout.removeAllComponents();
mainGridLayout.setColumns(columns);
mainGridLayout.setRows(rows);
mainGridLayout.addStyleName("grid-red");
mainGridLayout.setSizeFull();
mainGridLayout.setSpacing(true);
mainGridLayout.setMargin(true);
mainGridLayout.setColumnExpandRatio(0, 1);
mainGridLayout.setColumnExpandRatio(1, 1);
mainGridLayout.setColumnExpandRatio(2, 1);
mainGridLayout.setRowExpandRatio(0, 1);
mainGridLayout.setRowExpandRatio(1, 1);
mainGridLayout.setRowExpandRatio(2, 1);
Boolean[][] bars = {{true, true, true}, {true, true, true}, {true, true, true}};
for (int column = 0; column < mainGridLayout.getColumns(); column++) {
for (int row = 0; row < mainGridLayout.getRows(); row++) {
if (!bars[column][row])
continue;
String text = "<center>" + messageSource.getMessage("pages.index.bar"+column+row) + "</center>";
Label label = new Label(text);
label.setContentMode(ContentMode.HTML);
label.setHeight("80%");
label.setWidth("80%");
mainGridLayout.addComponent(label);
mainGridLayout.setComponentAlignment(label, Alignment.MIDDLE_CENTER);
}
}
}