diiN_ diiN_ - 2 months ago 5
Javascript Question

Show header text on top when using wrapped headers

I have a kendo grid with some columns like this:

columns: [
{
title: 'Test',
field: 'SomeField',
width: '200px'
},
{
title: 'Extra long example title',
field: 'SomeOtherField',
width: '100px',
headerAttributes: { style: "white-space: normal" }
},
...
]


My long title gets wrapped without any problems. But every shorter column title that doesn't need to get wrapped is shown at the bottom of the header like this:

+------------+------------+
| | Extra long |
| | example |
| Test | title |
+------------+------------+


However, I'd like to have the title at the top of the header like this:

+------------+------------+
| Test | Extra long |
| | example |
| | title |
+------------+------------+


I tried adding
headerAttributes: { style: "margin-top: 0" }
to the first column but it didn't change anything. How could I achieve this?

Answer

The comment of ArtemKh was the solution to my problem. I just had to add vertical-align: top to my headerAttributes to show the headers on top of the cell.

Comments