GridLayout: Remove spaces between rows and columns

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

i need to have a GridLayout containing an Embedded image in each cell,
The user will see just one hole image, (the GridLayout), with clickable events on each cell.

When i tried to create the grid, i had a problem with spaces between rows and columns, the global image looks broken in pieces.

Here is a sample code:


public void init() {
		mainWindow = new Window("Vaadin_test Application");
		VerticalLayout vl = new VerticalLayout();
		vl.setSizeFull();
		vl.addComponent(addImageGrid());
		mainWindow.setContent(vl);		
		setTheme("reindeer");
		setMainWindow(mainWindow);
	}

	
	private GridLayout addImageGrid(){
		GridLayout grid = new GridLayout(4, 2);
		grid.setSpacing(false);
		grid.setHeight("80px");
		grid.setWidth("160px");
		ThemeResource resource = new ThemeResource("floorPlan/rect.jpg");		
		Embedded b1 = new Embedded("", resource);
		b1.setHeight("40px");
		b1.setWidth("40px");
		Embedded b2 = new Embedded("", resource);
		b2.setHeight("40px");
		b2.setWidth("40px");
		Embedded b3 = new Embedded("", resource);
		b3.setHeight("80px");
		b3.setWidth("40px");
		Embedded b4 = new Embedded("", resource);
		b4.setHeight("40px");
		b4.setWidth("80px");
		Embedded b5 = new Embedded("", resource);
		b5.setHeight("40px");
		b5.setWidth("80px");
		
		grid.addComponent(b1, 0, 0);
		grid.addComponent(b2, 0, 1);
		grid.addComponent(b3, 1, 0, 1, 1);
		grid.addComponent(b4, 2, 0, 3, 0);
		grid.addComponent(b5, 2, 1, 3, 1);
		for(int i=0; i<4; i++){
			grid.setColumnExpandRatio(i, 0);
			for(int j= 0; j<2; j++){
				grid.setRowExpandRatio(j, 0);
				Component c = grid.getComponent(i, j);
				grid.setComponentAlignment(c, Alignment.MIDDLE_CENTER);
			}
		}
		return grid;
	}

Please find below the desired grid format and the layout that i got when i tried with a single rectangle (i circled in red the spaces that needs to be removed)

Thanks,
Dany
12409.png
12410.png

2

Hi,

I am not quite shure if it helps but I would inspect the grid’s html with firebug or build in chrome tools. Take a look at the css-classes, belonging to the grid and/or its cells.

I found out that nearly everthing can be customized via css.

I would start adding a StyleName to the grid and/or to the Embedded Components so that you can access it directly via your custom style.css.

Hope that helps.

3

Hi,

I have now spend several hours to get a solution for the same problem. I’m upgrading a Vaadin-Web-App from Vaadin 6.* to 7.3. And I’m wondering about spaces in our initial login screen. Fixing this problem is simple! Use a Image object instead of Embedded!

This code runs right in Vaadin 6.*, but with Vaadin 7.3 I get horizontal spaces between each GridLayout row:

// the dialog frame layout; contains the frame, the login form and the version information
GridLayout loginLayout = new GridLayout(3, 3);
loginLayout.setSpacing(false);

// the top line
loginLayout.addComponent(new Embedded(null, new ThemeResource(frameTop)), 0, 0, 2, 0);

// the middle line (left line, form content and right line)
Embedded imgLeft = new Embedded(null, new ThemeResource(frameSide));
Embedded imgRight = new Embedded(null, new ThemeResource(frameSide));
Component cmpLogin = getLoginForm();

loginLayout.addComponent(imgLeft, 0, 1);
loginLayout.addComponent(cmpLogin, 1, 1);
loginLayout.addComponent(imgRight, 2, 1);

loginLayout.setComponentAlignment(imgLeft, Alignment.MIDDLE_LEFT);
loginLayout.setComponentAlignment(cmpLogin, Alignment.MIDDLE_CENTER);
loginLayout.setComponentAlignment(imgRight, Alignment.MIDDLE_RIGHT);


// loginLayout.setRowExpandRatio(1, 1.0F);
// loginLayout.setRowExpandRatio(2, 0.1F);

// the bottom line
loginLayout.addComponent(new Embedded(null, new ThemeResource(frameBottom)), 0, 2, 2, 2);

After replacing all Embedded classes with Image classes the spaces are gone (without any CSS changes):

    // the dialog frame layout; contains the frame, the login form and the version information
    GridLayout loginLayout = new GridLayout(3, 3);
    loginLayout.setSpacing(false);

    // the top line
    ThemeResource topRes = new ThemeResource(frameTop);
    Image top = new Image(null, topRes);
    loginLayout.addComponent(top, 0, 0, 2, 0);

    // the middle line (left line, form content and right line)
    Image imgLeft = new Image(null, new ThemeResource(frameSide));
    Image imgRight = new Image(null, new ThemeResource(frameSide));
    Component cmpLogin = getLoginForm();

    loginLayout.addComponent(imgLeft, 0, 1);
    loginLayout.addComponent(cmpLogin, 1, 1);
    loginLayout.addComponent(imgRight, 2, 1);

    loginLayout.setComponentAlignment(imgLeft, Alignment.MIDDLE_LEFT);
    loginLayout.setComponentAlignment(cmpLogin, Alignment.MIDDLE_CENTER);
    loginLayout.setComponentAlignment(imgRight, Alignment.MIDDLE_RIGHT);


//    loginLayout.setRowExpandRatio(1, 1.0F);
//    loginLayout.setRowExpandRatio(2, 0.1F);

    // the bottom line
    loginLayout.addComponent(new Image(null, new ThemeResource(frameBottom)), 0, 2, 2, 2);

Seems the Embedded class calculates the component height in a different way like the Image class. Not sure if this is right (a feature) or a bug.

May be this helps some other guys with the same problem …

Regards,
Steffen