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

How to keep kendo grid header text to the top?

本文关键字：文本 顶部 标题 网格      更新时间：2023-09-26

我正在使用剑道数据网格，其中标题文本存在小问题，某些标题标签具有长文本，因为标题文本看起来不好，因为标题属性我正在使用换行符并使标题变大，因此小文本未正确对齐。有没有办法将所有标题放在顶部，使其看起来一致？

网格配置.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'
                                }
              },
]

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

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

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

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

然后，您可以将 css 放在它所属的 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;
}

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

 .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

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

相关文章：