当列大小调整为并且文本显示省略号时，如何使 Angular UI 网格的排序图标可见？

Question

每当 header 调整大小时，我希望排序图标在省略号之后可见（当对列进行排序时）

像这样，

我尝试在

下定位 span 元素

.ui-cell-contents

并尝试了各种组合，但都是徒劳。我相信这不是什么复杂的事情，但就是想不通。

有人可以告诉我如何实现同样的目标吗？

这是Plunk

Answer 1

因为图标元素是内联的，所以它会像文本一样被省略掉。您只需要将其从正常流程中取出即可。您可以将 position:absolute 添加到图标并从那里开始使用它。

.ui-grid-cell-contents i.ui-grid-icon-up-dir,
.ui-grid-cell-contents i.ui-grid-icon-down-dir{
    position:absolute;
    right: 0;
}