In Vaadin 7, how do you wrap the caption in the grid header? Right now the column is much wider then it needs to be based on the expected data, so the users want the column heading wrapped.
I tried the following:
.v-grid-column-header-content .v-grid-column-default-header-content {
white-space: normal;
}
but the browser cannot even see this change, so I am probably using the wrong CSS selectors. I have tried quite a few different selectors based on what I am seeing in the browser and the documentation, and none seem to work. I know it doesn't work because when I make the column narrower by dragging it, and it does not wrap. When I added white-space: normal; directly in browser, it wrapped correctly.
Also, I cleared the browser cache every time to ensure that was not the issue.
The next issue will be making the row automatically tall enough for the wrapping to be meaningful. So if you have ideas on this topic, please offer them.
This is not officially supported feature in Vaadin 7 Grid, but there is header wrap extension in GridExtensionPack add-on. that you can use.
Note, in modern Vaadin versions such as 14, 23 or 24 this is trivially supported.