How to keep kendo grid header text to the top?

Question

I am using kendo data grid where i have small issue with header text, Some of the header label has long text becuase of that header text does not look good because of headerAttributes i am using breaks line and making header larger so small text are not aligned properly. Is there a way to place all header to the top so it will look consistent ?

gridConfig.js

columns : [

                {
                    field : '',
                    title : 'Action',
                    width: '80px'
                    },


                }, {
                    field : 'riskAssessmentChallengeKey',
                    title : 'Challenge ID',
                    width: '100px',
                    headerAttributes: {
                        style: 'height: auto; white-space: normal'
                    }

                },
                 {
                  field : 'createWorkerText',
                  title : 'Created By',
                  width: '120px',
                  headerAttributes: {
                      style: 'height: auto; white-space: normal'
                                }

              },
]

Answer 1

Some variation of display: table-cell; vertical-align: top; text-align: center display: table-cell; vertical-align: top; text-align: center

or perhaps display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: top; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: top;

I would also probably do this in a CSS fie and add a class in your headerAtrributes

"class": "mygrid-header-cell",

Then you can put the css in a css file where it belongs.

EDIT Note you could also do CSS like this:

headerAttributes: { "class": "mygrid-header-cell"}

AND CSS

.k-grid-header .mygrid-header-cell {
  text-align: center;
  display: table-cell; vertical-align: top;
}
.k-grid-header .wrap-header {
  height: auto;
  overflow: visible;
  white-space: normal;
}

Answer 2

I faced a similar issue and I do something like this:

 .k-grid-header th.k-header {
    vertical-align:top;
  }

  .k-grid-header th.k-header > .k-link {
    max-height: 65px;
    white-space: normal;
    vertical-align: text-top;
    text-align: center;
    text-overflow: ellipsis;

}

this is some code that I use (see example): http://dojo.telerik.com/OPICO

Shrink and resize the output window to see the effect of this.