javascript - 如何对齐垂直:middle filter icon in Kendo UI Grid Header

Question

我正在像这个 jsFiddle 示例中那样自定义 kendo Grid header 样式。

Sample jsFiddle which demonstrates my issue

 $("#test-grid-2").kendoGrid({
  columns: [{
    field: "user.screen_name",
    title: "This is my centered header",
    headerAttributes: { "class": "center-header"},
      filterable:true
  },
           {
    field: "text",
    title: "This is my long header title to test",
    headerAttributes: { "class": "wrap-header"},
               filterable:true,
               width:100
  }],
  dataSource: viewModel.remoteSource,
    filterable:true
});

以及对应的CSS:

.k-grid-header .center-header {
  text-align: center;
}
.k-grid-header .wrap-header {
  height: auto;
  overflow: visible;
  white-space: normal;
}

但是，如果我的列宽较窄，我会得到过滤器图标未垂直对齐，如示例 fiddle 的第二列所示。

有人知道怎么解决吗？

Answer 1

我没有完美的解决方案，但我最近一直在做这方面的工作。

基本问题是 <a>包含过滤器图标的元素向右浮动，这意味着它会上升到父元素的顶部。如果对比两者<th>在 Dev Tools 元素中，您会看到，因为它们是垂直居中对齐的，所以两个过滤器图标实际上位于其各自父项的右上角。

如何修复？

我没有很好的答案，但我现在正在研究一种可能的 CSS 方法:

.k-grid-header .k-header {
    position: relative;
}
.k-header > .k-grid-filter {
    position: absolute;
    float: none;
    top: 35%;
    right: 6px;
}

参见:http://jsfiddle.net/C4KWQ/66/