when I combine I am not able t see the delete button

Question

• I moved my grid into popup. when i click three dots I need to show delete button
• I was able to see the delete button when it was alone.
• but when I combine I am not able t see the delete button.
• can you guys tell me how to fic it...

• providing my code and fiddle below.

• working fiddle http://jsfiddle.net/sureshatta/7brbws09/6/

• not working fiddle http://jsfiddle.net/XY7HT/61/

   <div id="grid"></div> <div class="pai-del-menu">Delete</div> <script id="delete-confirmation" type="text/x-kendo-template"> kendoWindow.data("kendoWindow") .content($("#delete-confirmation").html()) .center().open(); $(document).on("click", "#playerDocumentOk", function(){ pai_to_delete.remove(); </script> 

Answer 1

The z-index of the pop up is z-index: 10011; but your .pai-del-menu is only z-index: 999; . Just set it to above 10011 . For example z-index: 10012; .

Or you can set it dynamically, which I'd recommend as I realized the z-index is set dynamically:

$('.pai-del-menu').css({
  left: pai_x,
  top: pai_y,
  zIndex: parseInt($('.k-window').css('z-index')) + 1
});

Answer 2

Change the z-index to 99999 like below:

.pai-del-menu{
    padding: 4px;
    color: #000;
    border-radius: 5px;
    background-color: #eee;
    width: 80px;
    text-align: center;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    position: fixed;
    z-index: 99999;
    cursor: pointer;
}