How to set hover behavior while using CssLayout?

General
1

Hello,

I need to generate a lot of VerticalLayouts in diferent backgroung colors with some information in them (Labels). To do this I’m using the CssLayout to inject the css properties of the VerticalLayouts. Code simplified:

CssLayout cssLayout = new CssLayout() {

        String cores = new String{"lightblue", "#8dc73f", "#cd5c5c", "blueviolet"
        ,"burlywood", "pink", "cornflowerblue", "deepskyblue"
        , "gold", "lightgreen", "lightsalmon", "limegreen", "pink", "orchid", "skyblue"
        , "darkturquoise", "#95B5E8", "darkseagreen", "mediumturquoise", "palevioletred"};
        
        @Override
        protected String getCss(Component component) {

            if (component instanceof VerticalLayout) {
                return "background-color: "
                        + cores[new Random().nextInt(cores.length)]
  • “;”
    + “white-space: nowrap;”
    + “overflow:hidden;”
    + “margin:5px;”
    + “padding:10px;”;
    }
    return null;
    }
    };

That works fine. What I need now is to add a diferent background color or a border or something (whatever works, =]) when the mouse is over one of the layouts, but I couldn’t figure out how to do this. I tried adding a style to the cssLayout like folows:

//CSS
.v-csslayout-search:hover .v-verticallayout{
background-color: gray;
}

//adding
cssLayout.addStyleName(“search”);

But it did not work… Can anyone help me? The image of how is it now is below. I just want to change the color when mouse is over one of the little colorful layouts (the color of the little colorful layout). Thanks a lot!
13536.png

2

I got want I wanted (sort of) using the following css:

.search .v-verticallayout:hover .v-label{
overflow: visible;
white-space: normal;
word-wrap: break-word;
}

Now, when the mouse is over one of the verticalLayouts, the labels in the layout will be shown completely. So, if anyone is having any problems like this, that’s how it looks… Thank you!
13539.png