Table header not appearing with the addres book tutorial

General
1

Hi,

I have followed the tutorial with the latest vaadin release and it has been a great experience so far!

I have one problem though. When I started to create the custom style as described in chapter 7, the header of the person table are not displayed anymore. I had a look to the CSS and tried to debug it a bit but did not found what was the culprit.

Can you please have a look to my project and tell me what is wrong? I diff a diff on the customization in my project and what is on the tutorial and found no difference.

Thanks,
Stéphane
11523.zip (141 KB)

2

I’m willing to bet money on it that the culprit is the last selector in your theme, and specifically the padding values defined there:

.v-table-cell-content {
    [b]
padding: 2px 0 2px 3px;
[/b]
    line-height: normal;
    font-size: 85%;
}

The table component is very picky about the horizontal padding values, since they must be equal in both the header and the content of the table, otherwise the column size calculations go wonky.

You can read a more detailed explanation here, in the source of the base theme for the table (the first comment block in the file):
base/table/table.css

3

That helped, thanks!