如何将kendo网格标题文本保留在顶部?

时间:2016-02-16 15:44:08

标签: javascript css kendo-grid

我正在使用kendo数据网格,其中我的标题文本有小问题,一些标题标签有长文本因为标题文本不好看因为headerAttributes我使用了break行并使标题更大所以小文本没有正确对齐。有没有办法将所有标题放在顶部,以便看起来一致?

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'
                                }

              },
]

2 个答案:

答案 0 :(得分:1)

SO_RCVBUFFORCE

的一些变体

或者display: table-cell; vertical-align: top; text-align: center

我也可能会在CSS fie中执行此操作,并在display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: top;

中添加一个类

headerAtrributes

然后你可以将css放在它所属的css文件中。

编辑请注意,您也可以像这样执行CSS:

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

AND CSS

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

答案 1 :(得分:0)

我遇到了类似的问题,我做了类似的事情:

 .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;

}

这是我使用的一些代码(参见示例): http://dojo.telerik.com/OPICO

缩小并调整输出窗口的大小以查看其效果。