ExtJS 4 - Wrapping the column headers in grid pane

Question

I have a grid which has long phrases as header texts. These texts are never displayed properly in the available width for the column.

The question is: 'Is there any way these texts can be wrapped and limited to the column width?'

Attached is a screenshot of the issue.

Thanks in advance.

Answer 1

Give this a shot in your CSS:

.x-grid3-hd-inner {
     overflow: hidden;
     padding: 3px 3px 3px 5px;
     white-space: normal;
}

And additionally, another option if the first doesn't work:

.x-column-header-inner .x-column-header-text {
    white-space: normal;
}

.x-column-header-inner {
    line-height: normal;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    text-align: center;
    top: 20%;
}