Question

当加载网格减小图标列的大小时，将显示省略号而不是图标。当我们展开列时，它会显示图标。

我为剑道网格颜色分配了一个宽度，它有图标。＆＃34;＃mygrid＆＃34;具有2个字段，图标和指定宽度的列数组：＆＃34; 20px＆＃34; 这在旧版Chrome中可见，但在最新版本中不可见，版本：58.0.3029.96 dojo

    $("#mygrid").kendoGrid({
        dataSource: acc,
        columns:[
            {
                field: "abc",
                title: " ", 
                width : "20px",
                template: 
                 '<a onclick=" " title="abc" href="Javascript:void(0);">
                   <i class="fa fa-briefcase"></i>
                 </a>'  
            },
            {
                field: "xyz",
                title: " ", 
                width : "20px",
                template: 
                 '<a onclick=" " title="abc" href="Javascript:void(0);">
                   <i class="fa fa-credit-card"></i>
                 </a>'  
            }],
        groupable: true,
        reorderable: true,
        resizable: true,
        filterable: true
     });

Answer 1

Kendo自动将padding应用于表格单元格，这会导致您的锚点链接/ fa图标移出视图。为了解决这个问题，您需要向包含fa图标的td元素添加一个类，并手动覆盖它们的填充，如下所示：

    columns:[
        {
            field: "",
            title: " ",
            width: "20px",
            //Here is where we assign the class. 
            //Do this for each column containing a font awesome icon
            attributes: {
                "class": "faContainer"
            },
            template:
             '<a title="abc"><i class="fa fa-briefcase"></i></a>'
        }
    ]

然后你的CSS会包含这样的内容：

.k-grid .faContainer {
  padding: 0px;
}  
.faContainer {
  text-align: center;
}

这是一个显示它的Dojo链接：http://dojo.telerik.com/evoGA

Kendo网格图标列显示chrome版本中的省略号：58.0.3029.96

1 个答案: