Wrapping text in Vaadin 14 grid header

Flow
1

Good day everyone,

I have a couple of columns in my grid that don’t show the complete header text because there is not enough space to do so. I want the text to use multiple lines if necessary. That works when I add “white-space: normal;” in my browsers dev tools to the CSS of the header cell. What I then did was create a CSS file, placed it under frontends>styles and added the following snippet to it:

[part~="header-cell"] { white-space: normal; }

I then imported this file in my Java-Class like this:

@CssImport(value = "./styles/vaadin-grid-styles.css", themeFor = "vaadin-grid") public class KonzessionaerePage extends VerticalLayout implements BeforeEnterObserver {

However, this does not work as you can see on the attached screenshot. What am I missing here? According to the sources I found online this should work fine.
image.png

2

You’re on the right track, and I think the problem is CSS selector specificity. The style block that sets the default white-space:nowrap uses the following selector [part~='cell']:not([part~='details-cell']) which has more specificity (or “weight”) than your selector.

Try using this instead:

[part~='header-cellcell']:not([part~='details-cell'])

3

like this?

[part~='headercell']:not([part~='details-cell']) { white-space: normal; }

4

Yes that did it, thanks :slightly_smiling_face: