分割按钮在网格后面显示行 - Kendo UI

Question

我一直在使用kendo-ui网格，并一直试图将它们的分割按钮集成到网格中。

我的问题是，分离按钮的下拉菜单显示在它下面的行后面。我一直在调查检查员的下拉CSS，并没有能够让菜单显示在前面。

我一直在看扩展拆分按钮时产生的.k-animation-container。它产生于position: absolute和z-index: 1002。到目前为止，调整z-index和下拉和周边元素的位置值并没有产生解决方案。

我建议你看看这个fiddle，这里包括代码的完整性。

的Javascript

(function() { 
    gridName = '#theGrid'; 
    $(gridName).kendoGrid({ 
    columns: [ 
      { 
       title: '', 
       field: '', 
       filterable: false, 
       width: 200, 
       template: function (dataItem) {    
        return $('#splitBtnTemplate').clone().html(); 
       } 
      }, 
      { title: 'Subject', field: 'Subject', filterable: true, width: 200 },     
      { title: 'Status', field: 'Status', filterable: true, width: 80 } 
     ], 
     dataSource: { 
      data: [ 
       { Subject: "Subject", Sent: "Sent", Completed: "Completed", Status: "Status1"}, 
       { Subject: "Subject", Sent: "Sent", Completed: "Completed", Status: "Status2"}, 
       { Subject: "Subject", Sent: "Sent", Completed: "Completed", Status: "Status3"}, 
      ], 
     }, 
     dataBound: function(e){ 
      $(".myMenu").kendoMenu({ 
       openOnClick: true 
     }); 
     } 
    });  
})(); 

HTML

<div id="theGrid" class=""></div> 

<div style="display: none;" id="splitBtnTemplate"> 
    <ul class="myMenu"> 
    <li class="defaultItem" data-action="1">Actions</li> 
    <li class="emptyItem"><span class="empty">&nbsp;</span> 
    <ul> 
     <li onclick="actionBtn();">Cancel</li> 
     <li onclick="actionBtn();">View</li> 
     <li onclick="actionBtn();">Upload</li> 
     </ul> 
    </li> 
</ul> 
</div> 

CSS

.myMenu { 
    display: inline-block; 
    height: 28px; 
    font:12px sans-serif; 
} 
    .myMenu .k-animation-container { 

    } 
    .myMenu .defaultItem{ 
     margin-top: -1px; 
     height: 28px; 
    } 

    .myMenu .emptyItem { 
     border-right-width: 0; 
     margin-right: -1px; 
     height: 28px; 
    } 

    .myMenu .k-first{ 
     border-bottom: none !important; 
     margin-top: -1px; 
    } 

     .myMenu .emptyItem > .k-link { 
      padding-left: 0 !important; 
     } 

Answer 1

看起来它是因为过度的流量：隐藏在表格单元格上。这似乎是诀窍：

.k-grid td { 
    border-style: solid; 
    border-width: 0 0 0 1px; 
    padding: .4em .6em; 
    /* overflow: hidden; */ 
    line-height: 1.6em; 
    vertical-align: middle; 
    text-overflow: ellipsis; 
}