如何将剑道网格标题文本保持在顶部？答案

【问题标题】：How to keep kendo grid header text to the top?如何将剑道网格标题文本保持在顶部？
【发布时间】：2016-02-16 15:44:08
【问题描述】：

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

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

              },
]

【问题讨论】：

标签： javascript css kendo-grid

【解决方案1】：

display: table-cell; vertical-align: top; text-align: center 的一些变体

或者display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: top;

我也可能会在 CSS 文件中执行此操作，并在您的 headerAtrributes 中添加一个类

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

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

编辑请注意，您也可以这样做：

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

和 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;
}

【讨论】：

谢谢，css .k-grid-header .wrap-header 的第二部分是什么？我需要在课堂上使用它吗？
如果您希望文本换行，只需将该类添加到标题元素 (.wrap-header) 中，其他 k- 类已内置到剑道中。使用这些你可以使 CSS 特定。请注意，此处未指定宽度，因此它会包裹在从其他地方/默认情况下获得的宽度上。包裹长线。
感谢您的解释。太棒了

【解决方案2】：

我遇到了类似的问题，我做了这样的事情：

 .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

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

【讨论】：