Bug with Button and total column span in gridlayout ?

Hello
I try to put, in a gridlayout, a button which spans all column. The result is that the first column is not displayed. Result is ok with a label in place of the button.
In the picture you can see result for gridlayout with 4 columns. The first layout contains a button at line 1 (relative to 0) and the second contains a label.

My code :

public class FormT extends CssLayout {

	private static final long serialVersionUID = 6900745651359226467L;

	final private static int ROWS_NUMBER = 2;
	
	final private static int COLS_NUMBER = 4;
	
	public FormT() {

		GridLayout layout1 = new GridLayout(COLS_NUMBER, ROWS_NUMBER);

		Label myLabel1 = new Label("My label:");
		layout1.addComponent(myLabel1,0,0);
		
		TextField field1 = new TextField();
		field1.setRequired(true);
		field1.setImmediate(true);
		
		TextField field2 = new TextField();
		field2.setRequired(true);
		field2.setImmediate(true);
		
		TextField field3 = new TextField();
		field3.setRequired(true);
		field3.setImmediate(true);
		
		layout1.addComponent(field1,1,0);
		layout1.addComponent(field2,2,0);
		layout1.addComponent(field3,3,0);
		
		/* Set Button to span all columns at line 1 */
		Button validation1 = new Button("OK");
		layout1.addComponent(validation1,0,1,3,1);

		layout1.setComponentAlignment(validation1, Alignment.MIDDLE_CENTER);
		
		addComponent(layout1);

		GridLayout layout2 = new GridLayout(COLS_NUMBER, ROWS_NUMBER);

		Label myLabel2 = new Label("My label:");
		layout2.addComponent(myLabel2,0,0);
		
		TextField field21 = new TextField();
		field21.setRequired(true);
		field21.setImmediate(true);
		
		TextField field22 = new TextField();
		field22.setRequired(true);
		field22.setImmediate(true);
		
		TextField field23 = new TextField();
		field23.setRequired(true);
		field23.setImmediate(true);
		
		layout2.addComponent(field21,1,0);
		layout2.addComponent(field22,2,0);
		layout2.addComponent(field23,3,0);
		
		/* Set Label to span all columns at line 1 */
		Label validation2 = new Label("OK");
		layout2.addComponent(validation2,0,1,3,1);

		layout2.setComponentAlignment(validation2, Alignment.MIDDLE_CENTER);
		
		addComponent(layout2);

	
	}
}

Many thanks.

Maybe you just need to set the button width to 100%, so that it expands with the grid cell. As far as I know, it works with the label, because labels have by default 100% width.

 /* Set Button to span all columns at line 1 */
Button validation1 = new Button("OK");
validation1.setWidth("100%");
layout1.addComponent(validation1,0,1,3,1);

I did not test it though.

Have fun!
Jonas

Hi Michael,

did you try to set the button on full size?


...
        /* Set Button to span all columns at line 1 */
        Button validation1 = new Button("OK");
        validation1.setSizeFull();
        layout1.addComponent(validation1,0,1,3,1);

        layout1.setComponentAlignment(validation1, Alignment.MIDDLE_CENTER);
...

Greeting,
Pascal

Thanks Jonas.
In fact, it’s really a width problem. I set it on the layout and it’s works.
Many thanks