CODEWITHSUNDEEP
cssgridvaadin
Debasish
Debasish

Reputation: 63

Applying user defined CSS to Grid in Vaadin 7

In my application I have two Vaadin Grids. I want to apply default CSS to one grid and user defined CSS to the other. When I apply the user defined CSS to the other grid, the default CSS is dominating over the user defined CSS. Here are my code. In styles.scss, 

.my-grid-style{
    line-height: 64px !important;
   font-size: 12px !important;
   text-align: center !important;
}

In my application .java file I am using setStyleName as follows

grid.setStyleName("my-grid-style");

but this CSS is dominated by the default .v-grid-cell style. Can anyone suggest how to achieve the same?

Upvotes: 0

Views: 786

Answers (3)

Jon Strabala
Jon Strabala

Reputation: 1

This worked for me (not sure if you need .v-grid-body ollitietavainen didn't use it, but it may be important for other functions like editors )

UI.getCurrent().getPage().getStyles().add(
    ".my-grid-style .v-grid-body .v-grid-cell {\n" +"" +
    "     line-height: 18px;\n" + 
    "     font-size: 12px;\n" + 
    "}");

then use the style as discussed by utrucceh

grid.setStyleName("my-grid-style");

It sure would be nice if one of the following 'built-ins' worked like they did for the Table component:

grid.addStyleName(ValoTheme.TABLE_COMPACT); // "compact"
grid.addStyleName(ValoTheme.TABLE_SMALL); // "small"

Upvotes: 0

utrucceh
utrucceh

Reputation: 1116

I think your style is not adding to styles.Because of the default CSS can't dominate to "!important"
Try to add with programmatically:

UI.getCurrent().getPage().getStyles().add(".my-grid-style{\n" +
                                          "    line-height: 64px !important;\n" +
                                          "   font-size: 12px !important;\n" +
                                          "   text-align: center !important;\n" +
                                          "}");

then

grid.setStyleName("my-grid-style");

Upvotes: 0

ollitietavainen
ollitietavainen

Reputation: 4275

Try 

.my-grid-style {
  .v-grid-cell {
    //your styles
  }
}

Upvotes: 2

Related Questions