GridLayout hides column when using ColumnExpandRatio

Hi Together

Short and sweet: Why is GridLayout hiding the second column?


public class GridLayoutTestApp extends Application {

        @Override
        public void init() {
                Window mainWindow = new Window("GridLayoutTestApp");
                mainWindow.setSizeFull();
                mainWindow.getContent().setSizeFull();
                
                GridLayout grid = new GridLayout(3, 2);
                mainWindow.addComponent(grid);

                grid.setSizeFull();

                grid.addComponent(new Label("c0 / r0"), 0, 0);
                grid.addComponent(new Label("Can't see this label. Why?"), 1, 0);
                grid.addComponent(new Label("c2 / r0"), 2, 0);
                grid.addComponent(new Label("c0 / r1"), 0, 1);
                grid.addComponent(new Label("Can't see this label. Why?"), 1, 1);
                grid.addComponent(new Label("c2 / r1"), 2, 1);

                grid.setColumnExpandRatio(0, 1);
                grid.setColumnExpandRatio(2, 1);

                setMainWindow(mainWindow);
        }

}

Kurt
11745.png

Short and sweet: the Labels are 100% wide. Try undefined wide, or a specific width.

Thanks Marc. I completely forgot that Labels are 100% wide. Sorry.

This works - for everybody who is interested in:

public class GridLayoutTestApp extends Application {

        @Override
        public void init() {
                Window mainWindow = new Window("GridLayoutTestApp");
                mainWindow.setSizeFull();
                mainWindow.getContent().setSizeFull();
                
                GridLayout grid = new GridLayout(3, 2);
                mainWindow.addComponent(grid);

                grid.setSizeFull();

                Label c0r0 = new Label("c0 / r0");
                c0r0.setSizeUndefined();

                Label c1r0 = new Label("c1 / r0 - Here it is!");
                c1r0.setSizeUndefined();

                Label c2r0 = new Label("c2 / r0");
                c2r0.setSizeUndefined();

                Label c0r1 = new Label("c0 / r1");
                c0r1.setSizeUndefined();

                Label c1r1 = new Label("c1 / r1 - Here it is!");
                c1r1.setSizeUndefined();

                Label c2r1 = new Label("c2 / r1");
                c2r1.setSizeUndefined();

                grid.addComponent(c0r0, 0, 0);
                grid.addComponent(c1r0, 1, 0);
                grid.addComponent(c2r0, 2, 0);
                grid.addComponent(c0r1, 0, 1);
                grid.addComponent(c1r1, 1, 1);
                grid.addComponent(c2r1, 2, 1);

                grid.setColumnExpandRatio(0, 1);
                grid.setColumnExpandRatio(2, 1);

                setMainWindow(mainWindow);
        }

}

Hehe, don’t be sorry - it’s one of the gotchas in Vaadin. Been there, done that, will accidentally do it again :wink:

(In case someone wonders - it’s a you-win-some-you-loose-some situation; 100% wide works out very nicely in most cases, while it causes surprises in some cases… Consistency vs. convenience, I guess.)

Best Regards,
Marc