I tested out your code and it seemed to work just as you described that you wanted it to work. Can you clarify what exactly goes wrong. I’ve modified the code so much that it is easy visually to see what is going on. I’ve added labels to layouts, a background color to the labels to see their size and spacing between the cells to see the borders of the labels.
I have a 1280px wide gridlayout. In the first grid both labels took 634px. In the second grid it was 415px, 427px, 414px (the 0.34 is evident and then there are some rounding differences) and the third every cell gave evenly 311px width to the labels.
Here’s my code as a whole. It is a fully working app ready to be deployed:
PlaygroundApplication.java
package com.example.playground;
import com.vaadin.Application;
import com.vaadin.ui.*;
public class PlaygroundApplication extends Application {
private static final long serialVersionUID = 6031735832707957247L;
@Override
public void init() {
VerticalLayout mainLayout = new VerticalLayout();
mainLayout.setSpacing(true);
Window mainWindow = new Window("Playground Application", mainLayout);
Label label = new Label("Hello Vaadin user");
mainWindow.addComponent(label);
setMainWindow(mainWindow);
// Two column grid that fills the width of the page, each column taking up one half the space
GridLayout layout = new GridLayout(2,5);
layout.setWidth("100%");
layout.setColumnExpandRatio(0, 0.5f);
layout.setColumnExpandRatio(1, 0.5f);
layout.addComponent(new Label("foo"), 0, 0);
layout.addComponent(new Label("foo"), 1, 0);
layout.setSpacing(true);
mainWindow.addComponent(layout);
// Three column grid that fills the width of the page, each column taking up 1/3rd the space
layout = new GridLayout(3,5);
layout.setWidth("100%");
layout.setColumnExpandRatio(0, 0.33f);
layout.setColumnExpandRatio(1, 0.34f);
layout.setColumnExpandRatio(2, 0.33f);
layout.addComponent(new Label("foo"), 0, 0);
layout.addComponent(new Label("foo"), 1, 0);
layout.addComponent(new Label("foo"), 2, 0);
layout.setSpacing(true);
mainWindow.addComponent(layout);
// Four column grid that fills the width of the page, each column taking up 1/4th the space
layout = new GridLayout(4,5);
layout.setWidth("100%");
layout.setColumnExpandRatio(0, 0.25f);
layout.setColumnExpandRatio(1, 0.25f);
layout.setColumnExpandRatio(2, 0.25f);
layout.setColumnExpandRatio(3, 0.25f);
layout.addComponent(new Label("foo"), 0, 0);
layout.addComponent(new Label("foo"), 1, 0);
layout.addComponent(new Label("foo"), 2, 0);
layout.addComponent(new Label("foo"), 3, 0);
layout.setSpacing(true);
mainWindow.addComponent(layout);
setTheme("playgroundtheme");
}
}
styles.css
@import url(../reindeer/styles.css);
.v-gridlayout .v-label{
background:lime
}
Screenshot:
Dom tree of the application:
