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.

CssImport when using Component Exporter by Mikhail Shabarov, 1 month ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

Vaadin 7.6.4 Gridlayout borders

Phillip Larkin
6 years ago Mar 22, 2016 6:14pm

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

 

Joacim Päivärinne
6 years ago Mar 24, 2016 3:03pm

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