Vaadin 7.6.4 Gridlayout borders

Flow
1

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 */
}

2

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);
}