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

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Styling GridLayout-Slot

Dmitriy Yankin
6 years ago Nov 19, 2015 9:03pm


I need to restyle a single GridLayout. But when I use addStyleName method to add a custom style to GridLayout it doesn't restyle it.
For example:

<div class="v-gridlayout v-layout v-widget v-has-width v-has-height customstyle v-gridlayout-customstyle"
style="position: absolute; height: 100%; width: 100%;">
<div class="v-gridlayout-spacing-off" style="position: absolute;">
<div class="v-gridlayout-slot" style="width: 193px; left: 0px; height: 69px; top: 0px;">
<div class="v-horizontallayout v-layout v-horizontal v-widget main-menu v-horizontallayout-main-menu"
style="position: absolute; top: 18.5px;">
<div class="v-slot v-slot-quiet">

As you can see, only "v-gridlayout" has customstyle style name. "v-gridlayout-slot" doesn't have customstyle, so I can't restyle it and all GridLayout have wrong style. Does it mean that I can't restyle selected Gridlayouts (and not all of them with restyling all "v-gridlayout-slot")? 

Ryan How
6 years ago Feb 08, 2016 2:36am

You need css selector like this:

.customstyle .v-gridlayout-slot
  box-shadow: 0 0 5px black inset;

Then it will only apply to the v-gridlayout-slot of a grid layout with customstyle, not all grid layouts.