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();
resultsGrid.setContainerDataSource(resultsList);
resultsGrid.addStyleName("test");
(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.
v-grid-row.v-grid-row-focused.v-grid-row-has-data
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.
You should customize
td inside
.v-grid-row :
.
.v-grid-test.v-grid-row > td {
line-height: 18px; // adjust to your needs
font-size: 10px; // adjust to your need
}
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.