Overriding Theming and Stylling for Grid won't work?

I’m trying to make my Grid text and columns smaller because I have a lot of columns.

So i have a grid:

Grid resultsGrid = new Grid();

(I’ve also tried resultsGrid.setStyleName(“test”)
I have a grid, and I’m looking at the CSS with Firefox:

So I’m not exactly sure which one to use, but I’m guessing it’s .v-grid-body.
so in my mytheme.scss, I have this:

.test.v-grid-body { line-height: 18px; // adjust to your needs font-size: 10px; // adjust to your needs } Zero things changef in my grid.

Is there another place I’m suppose to be looking?

You should customize
. .v-grid-test.v-grid-row > td { line-height: 18px; // adjust to your needs font-size: 10px; // adjust to your need }

It didn’t change anything, unfortunately. I even compiled the theme but I don’t know if that makes a difference.

But it did make me think about looking through the firefox css thing a bit more:

on the side, if I add the font size: 10 under the .mytheme.v-grid-cell, I was able to edit the font size in the grid in firefox.

But I’m not sure how to do it in the SCSS file for vaadin though. This was my attempt at it and it didn’t work. Do you know what might work?

.test.v-grid-cell.mytheme.v-grid-cell{ font-size:10px; line-height: 18px; } or maybe

.test.v-grid-cell.mytheme.v-grid-cell > td{ font-size:10px; line-height: 18px; } ?? neither worked.

Have you tried with

.v-grid-test .v-grid-cell { ... } If this does not work try add !important flag to the css rules

Even better if nested in your scss theme mixin


Try to clear browser cache before testing. I have tested the following:

@import "../valo/valo.scss";

@mixin mytheme {
@include valo;

// Insert your own theme rules here
.v-grid-test {
.v-grid-row > td {
color : white;
background : red;
line-height : 15px;

As you can see it works:

How do you do Alisa Lee? Do you skill have the problem?

I was able to get your solution to work when I created an entirely new project. But I can’t get it to work in the original project I had.

I’m going through my code to see what might be causing it. Thank you.

Ok I got it to work finally. I had another folder called “resource” in my themes folder ( webapp > Vaadin > themes > resource) it held some images that I am using in my app.

It caused a problem in my POM.xml file. So I went back and had to comment out this line to get rid of the error:

<goals> <goal>update-theme</goal> <goal>update-widgetset</goal> <goal>compile</goal> [b] <!-- Comment out compile-theme goal to use on-the-fly theme compilation <goal>compile-theme</goal>--> [/b] </goals> So instead, I moved all the contents from my resource folder to my mytheme folder ( webapp > Vaadin > themes > mytheme) and changed the image addresses to point to mytheme folder and UNCOMMENTED the above line. This is when the styles started working.

Sorry for the trouble. This was my fault. I wish i knew why creating an extra folder under themes made it freak out, but I’m glad to have a solution now. Thanks for your help!

Ok one more question: How do I go about editing the header?

I’m currently trying:

.v-grid-test .v-grid-column-header-content, .v-grid-column-footer-content > th { line-height: 15px; } But it won’t work. If I look in Firefox, the direct line for it says:

.mytheme .v-grid-column-header-content, .mytheme .v-grid-column-footer-content { line-height: 37px; overflow: hidden; text-overflow: ellipsis; vertical-align: baseline; width: 100%; } But if I adjust the line-height here, it will fix the header:

line-height: 37 px:

line-height: 15px:

The HTML Source:

How do you guys figure out exactly which CSS to use to override?? I’m having so much trouble. it’s like a really bad puzzle game.

I was trying to use

this thread

, but I don’t want ALL of my grids, just this grid (the one using setStyleName(“test”);

Alisa, try the following:

.mytheme .v-grid-test .v-grid-header .v-grid-column-header-content, .mytheme .v-grid-test .v-grid-header .v-grid-row > th { line-height : 15px; } Warning! Before testing clear browser cache!