Weired behaviour with Grids and cells that span over multiple columns

Hello again,

I experience some weired behaviour with GridLayouts here. I am building a layout which has one component that spans over all columns. The Grid has 100 percent width. The other components in the Grid have a fixed width. Upon click on a button the Grids gets a new Column. The rightmost column is set to an expand ratio of 100.
What happens is that the columns are equally divided upon the available space.


fig. 1
/------------------/
|(Textfield.......)|
|(b1)|             |    
/------------------/

fig. 2 after click on the button, a new button appeard. that's the way it should look like:

/------------------/
|(Textfield.......)|
|(b1)|(b2)|        |    
/------------------/

fig. 3 same as above, but this time the way it actually looks like.

/------------------/
|(Textfield.......)|
|(b1)    |(b2)     |    
/------------------/

I noticed three things:

  • The problem only occurs when the number of columns is changed dynamically
  • The problem only occurs when the component that spreads across several cols is wider than the other columns (no matter if it’s measured in percent or in pixels.)
  • The problem disappears as soon as the grid is wider than the screen
  • The problem disappears as soon as you reload the app

Here is the code in case you want to try it out:



    public void init() {
        final VerticalLayout mainLayout = new VerticalLayout();

        mainLayout.setSpacing(true);
        mainLayout.setMargin(true);
        mainLayout.setHeight(100, Sizeable.UNITS_PERCENTAGE);
        mainLayout.setWidth(100, Sizeable.UNITS_PERCENTAGE);
        setMainWindow(new Window("Vaadin Test", mainLayout));


        final GridLayout gl = new GridLayout(1,3);
        // textfield spreads across all cols
        final TextField textfield = new TextField();
        textfield.setWidth(100, Sizeable.UNITS_PERCENTAGE);
        Button b1 = new Button("new button");
        Button b2 = new Button("nothing");
        gl.addComponent(textfield,0,0);
        gl.addComponent(b1,0,1);
        gl.addComponent(b2,0,2);
        b1.setWidth(270, Sizeable.UNITS_PIXELS);
        b2.setWidth(270, Sizeable.UNITS_PIXELS);
        b1.addListener(new Button.ClickListener() {
            public void buttonClick(Button.ClickEvent event) {
                cols++;
                gl.setColumns(cols);
                Button b1 = new Button("new button" +cols);
                Button b2 = new Button("nothing" + cols);
                gl.addComponent(b1,cols-1,1);
                gl.addComponent(b2,cols-1,2);
                b1.setWidth(270, Sizeable.UNITS_PIXELS);
                b2.setWidth(270, Sizeable.UNITS_PIXELS);
                // adjust expand ratios...
                if (cols>0) {
                    //next to last colum 0, last column 100
                    gl.setColumnExpandRatio(cols-2,0);
                    gl.setColumnExpandRatio(cols-1,100);
                }
                gl.removeComponent(textfield);
                gl.addComponent(textfield,0,0,cols-1,0);
            }
        });
        gl.setSizeFull();
        mainLayout.addComponent(gl);
        mainLayout.setExpandRatio(gl,100);
        Button restart = new Button("restart");
        mainLayout.addComponent(restart);
        restart.addListener(new Button.ClickListener() {
            public void buttonClick(Button.ClickEvent event) {
                mainLayout.getWindow().getApplication().close();

            }
        });

    }


Any idea what’s wrong here?

Greetings
Peer

Sounds like a bug in GridLayout as refresh in the browser or clicking “Force layout” in the debug window corrects the layout. Created http://dev.vaadin.com/ticket/5227 for this.

Hi!

Fixed in trunk, just out of 6.4-pre1. Try with tomorrows nightly.

cheers,
matti

thanks!

Greetings
Peer