problem with gridlayout

Im trying the example of the book of vaadin to change te design of a gridlayout,(https://vaadin.com/book/-/page/layout.gridlayout.html#N3562E) but It dosent work, It dosent take none of
the following elements:
.v-gridlayout-gridexpandratio
.v-gridlayout-gridexpandratio .v-gridlayout-margin
.v-gridlayout-gridexpandratio > div > div > div
.v-gridlayout-gridexpandratio .v-label

But If I modify some elements of the .v-gridlayout or .v-gridlayout-margin, that does work, what Im doing wrong?

I hope you added the “gridexpandratio” style for the GridLayout with addStyleName().

Looking at
the example
, it seems outdated, as the GL’s DOM structure has changed at some point. Even that way to get the borders was a bit hacky, and I’m not sure if it’s still possible. I’ll try to see a bit later.

In general, styling something is usually done by inspecting the HTML document with a web inspector like Firebug or the built-in tools in Chrome or Firefox, to see the HTML structure and available style names. The tools usually let you experiment with CSS rules live, and after that you can write the CSS/Sass in the theme.

Ok… Looks like having borders between the cells in a GridLayout is practically impossible to do well in the current implementation. The layout slots have complex size calculations, which make themeing to get the borders really difficult. Anyhow, the
GridLayout examples
work somewhat better now, although there’s still oddities and sizing the contained components can be rather difficult if you want to show the borders.

The styling for the borders can be done somewhat as follows:

$cellborder-color: blue;
$cellborder-width: 2px;
$cellborder-slot-padding: 5px;
.v-gridlayout-cellborders {
  border: solid $cellborder-color $cellborder-width;

  .v-gridlayout-slot {
    box-shadow: inset 0px 0px 0px $cellborder-width $cellborder-color;

    .v-widget {
      // Padding in the slots would mess size calculations
      // in GridLayout, so have to set the padding as
      // margin for the contained widgets.
      margin: $cellborder-slot-padding + $cellborder-width;
    }
  }
}

oooooooh… I thought that was an inner part of the .v-gridlayout, sorry, I will try again.

I didnt knew that there were live book examples, I will check them out. Thank you.