分割按鈕在網格後面顯示行 - 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; 
}