Having cell span over multiple columns in GridLayout

General
1

Hi all!

I am trying to figure out the correct way to have a 2 x 2 GridLayout with two content cells in the top and one content cell in the bottom where the bottom cell occupies the same width as the two top cells. Pretty simple right?

I’m however having huge problems getting this to work. I have three images added to the GridLayout, one in each cell in the top row and one image in the bottom cell.
This is how it’s implemented:

           [code]

GridLayout grid = new GridLayout(2, 2);

	SHorizontalLayout h1 = new SHorizontalLayout();
	SHorizontalLayout h2 = new SHorizontalLayout();
     	SHorizontalLayout h3 = new SHorizontalLayout();
	
	h1.addComponent(new Embedded(null, new ThemeResource("../m2m/img/lock_20x20.png")));
	h2.addComponent(new Embedded(null, new ThemeResource("../m2m/img/lock_20x20.png")));
	h3.addComponent(new Embedded(null, new ThemeResource("../m2m/img/lock_20x20.png")));
	
	h1.setSizeFull();
	h2.setSizeFull();
	h3.setSizeFull();
	
	h1.setStyleName("test-layout1");
	h2.setStyleName("test-layout2");
	h3.setStyleName("test-layout3");
	
	grid.addComponent(h1, 0, 0);
	grid.addComponent(h2, 1, 0);
	grid.addComponent(h3, 0, 1, 1, 1);
	
	gridLayout.addComponent(grid);
	
	outerHLayout.addComponent(gridLayout);

[/code]

This should produce a result looking like this:

But instead it looks like this:

This is because the cells add a wrapper before the content is added, a wrapper without a CSS class.

<div style="float: left; margin-left: 0px;">

This tag totally restricts how the content can expand. I don’t get it. What is the use of having a feature in the GridLayout to add content that spans over several cells in a row if there’s still a wrapping tag added that will restrict the width?!?

I’ve been sitting with this for quite some time now and I’m not getting it to work. Does anyone have any good ideas of what properties to apply to the GridLayout or its content to have one cell span over the entire width of the GridLayout? Please help me!

2

Also need this feature for grid layout!

3

The code you added works indeed as you describe; but only when the Grid doesn’t have a defined width. If you give the layout a width, the bottom cell will span correctly. I do think it is a bug, so I created
http://dev.vaadin.com/ticket/11933
.

4

I know this is a bit old one, but for anyone who wants to achieve this,

in place of gridLayout.addComponent(grid); add something like gridLayout.addComponent(grid, col1, row, col2, row);

5

I can’t get it working :-(. I have a grid 3x3, all components, except checkbox, have width 100%, middle text field should shrink over 2 columns (
mainLayout.addComponent(street, 1, 1, 2, 1);
), but the result looks as on the attached screenshot.
13471.png