diiN_ diiN_ - 10 months ago 41
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 Source

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.