Draw borders to visually separate areas of a GridLayout

How do I draw borders, to visually separate areas within a GridLayout?

For example:

If CSS is the way to go, I can do that. I have already created my own custom theme. And I’m familiar with CSS. I’ve tweaked a few widgets in Vaadin. But I cannot figure out a way to have a border across the cells of the GridLayout, not a border on a displayed component.

Open to any solution, CSS or something else.

–Basil Bourque

Tried quickly on sampler, it seems like doing :

.v-gridlayout-gridexample div{
  background-color: red;
}
.v-gridlayout-gridexample div div div {
  background-color: white;
}

Will give you white cells and red borders.
Actually it is white cells on red background, with the background only showing between the cells…

I did see that example in the Book of Vaadin. But as I understand it, you must determine the exact HTML structure in each particular usage. And then update after making changes to that structure. Not fun.

I experimented with a Label whose value was a hard space (U+00A0) and CSS to repeat an background image. That worked, but I had difficulty getting the label to grow to meet larger sizes when the GridLayout’s other contents were modified during runtime.

Those divs are generated by vaadin itself and won’t change until at least v7 so you are quite safe using them.
In order to make some advanced CSS you will anyway need to take into account the DOM structure of the page. Borders and shadows in Vaadin are in the advanced CSS category.

The challenge is that I need borders between some of the cells in a GridLayout, not all of them.

See screenshot in earlier posting above.

–Basil Bourque

Hi Basil,

You won’t be able to do that presentation with CSS + GridLayout as it stands; however, I would suggest adding components (e.g. a label) in the relevant parts of the GridLayout, and then styling the component. I’ve quickly knocked out the following example… if you need the borders to join up, you’ll need to remove the spacing on the layout.

Cheers,

Charles.

e.g. Layout:

[code]

GridLayout gl = new GridLayout(5, 12);
gl.addStyleName(“example”);
gl.setMargin(true);
gl.setSpacing(true);
gl.addComponent(new Label(“

New Account

”, Label.CONTENT_XHTML), 0, 0, 4, 0);

gl.addComponent(new Label("<h2>Your Info</h2>", Label.CONTENT_XHTML), 0, 1, 2, 1);
gl.addComponent(new Label("Caption"), 0, 2);
gl.addComponent(new TextField(), 1, 2);
gl.addComponent(new Label("Caption"), 0, 3);
gl.addComponent(new TextField(), 1, 3);
gl.addComponent(new Label("Caption"), 0, 4);
gl.addComponent(new TextField(), 1, 4);

Label vSep = new Label();
vSep.addStyleName("vertical-separator");
vSep.setHeight("100%");
vSep.setWidth("1px");
gl.addComponent(vSep, 2, 2, 2, 4);

gl.addComponent(new Label("<h2>Login Info</h2>", Label.CONTENT_XHTML), 3, 1, 4, 1);
gl.addComponent(new Label("Caption"), 3, 2);
gl.addComponent(new TextField(), 4, 2);
gl.addComponent(new Label("Caption"), 3, 3);
gl.addComponent(new TextField(), 4, 3);
gl.addComponent(new Label("Caption"), 3, 4);
gl.addComponent(new TextField(), 4, 4);

Label hSep1 = new Label();
hSep1.addStyleName("horizontal-separator");
hSep1.setHeight("1px");
gl.addComponent(hSep1, 0, 5, 4, 5);

gl.addComponent(new Label("<h2>Billing Info</h2>", Label.CONTENT_XHTML), 0, 6, 2, 6);
gl.addComponent(new Label("Caption"), 0, 7);
gl.addComponent(new TextField(), 1, 7);
gl.addComponent(new Label("Caption"), 0, 8);
gl.addComponent(new TextField(), 1, 8);
gl.addComponent(new Label("Caption"), 0, 9);
gl.addComponent(new TextField(), 1, 9);

gl.addComponent(new Label("Caption"), 3, 7);
gl.addComponent(new TextField(), 4, 7);
gl.addComponent(new Label("Caption"), 3, 8);
gl.addComponent(new TextField(), 4, 8);
gl.addComponent(new Label("Caption"), 3, 9);
gl.addComponent(new TextField(), 4, 9);

Label hSep2 = new Label();
hSep2.addStyleName("horizontal-separator");
hSep2.setHeight("1px");
gl.addComponent(hSep2, 0, 10, 4, 10);

[/code] CSS:

.example h1 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.example h2 {
  margin-top: 4px;
  margin-bottom: 4px;
}
.example .horizontal-separator, .example .vertical-separator {
  background:black;
}

12213.png

The example above doesn’t seem to work in vaadin 7 beta3. I also tried:


public class HorizontalRule extends Label {
  public HorizontalRule() {
    super("<hr/>", ContentMode.HTML);
  }
}

In both cases the v-slot div has a height of 48px for a 2px line. I can’t seem to find a way to alter the height through the api. I can css it but that seems like over kill. Is this a bug?

In Vaadin 7.3 works fine :wink: