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.

GridLayout: Remove spaces between rows and columns

Dany Rouss
9 years ago Jun 19, 2012 11:18am
Frithjof Schaefer
9 years ago Jun 19, 2012 11:29am
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