In a grid, I want some columns to be right-aligned - easy: setTextAlign(ColumnTextAlign.END).
But this also right-aligns the header. All headers should stay left-aligned.
I tried to fix it in styles.css: vaadin-grid::part(header-cell) { text-align: left; }
and I tried to set a header component instead of plain text and apply the style there: .getStyle().setTextAlign(TextAlign.LEFT);
Both didn’t work. Please help. :)
You were on the right track – the reason it didn’t work is that the actual text contents of the cell is not in the cell itself but in a wrapper element (due to technical reasons), and the text-align:right you want to override is applied to that wrapper rather than the cell itself.
It’s actually easier to style the alignment of body cells than to override the alignment set with setTextAlign, so remove setTextAlign(ColumnTextAlign.END) and apply a partNameGenerator instead:
columnThatShouldBeRightAligned.setPartNameGenerator(item -> "right-aligned-cell");
and in a stylesheet do
vaadin-grid::part(right-aligned-cell) {
text-align: right;
}