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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Vaadin 7.6.4 Gridlayout borders
I recently built the tutorial and then added a gridlayout similar to the one here. I am trying to add a border around each cell like the example has (I know it is an image) by following the instructions as well as looking online. I am unable to get the borders to show. Is there something that I am missing besides what is in the documenation? I tried adding the following:
.v-gridlayout-gridexpandratio {
background: blue; /* Creates a "border" around the grid. */
margin: 10px; /* Empty space around the layout. */
}
/* Add padding through which the background color shows. */
.v-gridlayout-gridexpandratio .v-gridlayout-margin {
padding: 2px;
}
/* Add cell borders and make the cell backgrounds white.
* Warning: This depends heavily on the HTML structure. */
.v-gridlayout-gridexpandratio > div > div > div {
padding: 2px; /* Layout background will show through. */
background: white; /* The cells will be colored white. */
}
/* Components inside the layout are a safe way to style cells. */
.v-gridlayout-gridexpandratio .v-label {
text-align: left;
background: #ffffc0; /* Pale yellow */
}
Hey Philip,
Try this:
@Override
protected void init(VaadinRequest request) {
final CssLayout layout = new CssLayout();
setContent(layout);
layout.setSizeFull();
GridLayout grid = new GridLayout(3, 3);
for (int i = 0; i < grid.getColumns() * grid.getRows(); i++) {
grid.addComponent(new Label("Cell " + i));
}
grid.setSizeFull();
layout.addComponents(grid);
}
SCSS
.v-gridlayout-slot {
border: 1px solid rgba(0,0,0,0.12);
}