[英]How to keep kendo grid header text to the top?
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. 我正在使用kendo数据网格,其中标题文本有小问题,某些标题标签具有长文本,因为该标题文本由于headerHeaderAttributes看起来不太好,因为我使用的是换行符并使标题较大,因此小文本未对齐正确地。 Is there a way to place all header to the top so it will look consistent ?
有没有一种方法可以将所有标头放置在顶部,以便看起来一致?
gridConfig.js 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'
}
},
]
Some variation of display: table-cell; vertical-align: top; text-align: center
display: table-cell; vertical-align: top; text-align: center
一些变化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;
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
我也可能会在CSS fie中这样做,并在
headerAtrributes
添加一个类
"class": "mygrid-header-cell",
Then you can put the css in a css file where it belongs. 然后,您可以将css放入它所属的css文件中。
EDIT Note you could also do CSS like this: 编辑注意,您也可以像这样做CSS:
headerAttributes: { "class": "mygrid-header-cell"}
AND CSS 和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;
}
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 这是我使用的一些代码(请参见示例): http : //dojo.telerik.com/OPICO
Shrink and resize the output window to see the effect of this. 缩小并调整输出窗口的大小以查看其效果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.