Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

GridLayout: Remove spaces between rows and columns

Dany Rouss
9 years ago Jun 19, 2012 11:18am

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

Last updated on Jun, 19th 2012
Frithjof Schaefer
9 years ago Jun 19, 2012 11:29am

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.

Steffen Ewert
7 years ago Oct 15, 2014 6:01pm

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

+1