Tabelle Sortierer (Gabel) sticky Header nicht klebrig in jquery modalen Dialog

Question

Ich versuche sticky Header auf eine Tabelle in einem jquery modalen Dialog mit Tablesorter (Gabel) stickyheaders anzuwenden.

jquery modal enthält auch Bootstap-Styling, der auf Attribute angewendet wird.

Sticky Header ist erstellt, kann ich von der Überprüfung von HTML und auch auf dem Bildschirm überprüfen, aber es scrollt nach unten wie Tabelle gescrollt wird.

Scheint wie ein CSS-Problem, aber ich bekomme nicht, was genau es ist.

Hier ist ein jsfiddle

$(function(){ 
 
var row = '<tr><td><input class="item" type="checkbox"></td><td>00000001</td><td>ABC 265g</td></tr>'; 
 
    
 
var tbody=$('#itemSearchResults > tbody'); 
 
var i = 0; 
 
    
 
$(document).on('click', "#showItemSearchDialog", function() { 
 

 
     var modalTitle = $('#searchItemNameDialog').attr('title'); 
 
     
 
      $("#searchItemNameDialog").dialog({ 
 
        dragable: true, 
 
        resizable: false, 
 
        title: modalTitle, 
 
        modal: true, 
 
        closeOnEscape: true, 
 
        minWidth: 768, 
 
        maxWidth: 'auto', 
 
        position: { 
 
         my: "center top", 
 
         at: ("center top+" + ($(window).height() * .1)), 
 
         collision: "none" 
 
        }, 
 
        open: function (event, ui) { 
 
        // Will fire when this popup is opened 
 
        // jQuery UI Dialog widget 
 
        
 
        for(i=1;i<=100;i++){ 
 
        \t tbody.append(row); 
 
        \t i++; 
 
        } 
 
        
 
        $('#itemSearchResults').tablesorter({ 
 
         widgets: ['stickyHeaders'], 
 
         widgetOptions: { 
 
          // jQuery selector or object to attach sticky header to 
 
          stickyHeaders_attachTo: '#itemSearchResultContainer', 
 
          stickyHeaders_offset: 50 
 
         } 
 
        }); 
 
     \t \t \t \t } 
 
    }); 
 

 
     return false; 
 
    }); 
 

 
    $(document).on('dialogclose', '#searchItemNameDialog', function() { 
 
     $(this).dialog('close').dialog('destroy'); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.4/js/jquery.tablesorter.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.4/js/jquery.tablesorter.widgets.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/> 
 

 
<div style="max-width: 290px;"> 
 
    <div class="input-group input-group-sm input-group-xs"> 
 
     <span class="input-group-btn"> 
 
      <input name="ItemName" class="form-control" id="itemName" type="text" placeholder="Item Name" value=""> 
 
      <button class="btn btn-default" id="showItemSearchDialog" type="button"> 
 
       <span class="fa fa-search fa-fw" aria-hidden="true"></span> 
 
      </button> 
 
     </span> 
 
    </div> 
 
</div> 
 

 

 
<div id="searchItemNameDialog" class="table-responsive" title="Search - Item" style="display:none"> 
 

 
<div class="container-fluid"> 
 
    <form class="form" id="itemSearchForm" method="get" novalidate="novalidate"> 
 
     <div class="row"> 
 
      <div class="form-group"> 
 
       <label class="control-label" for="itemNamePattern">Item Name</label> 
 
       <input name="itemNamePattern" class="form-control success" id="itemNamePattern" style="max-width: 500px;" type="text" placeholder="Item Name" data-toggle="popover" data-placement="right" data-trigger="focus"> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="form-group"> 
 
       <button class="btn btn-primary pull-right" id="searchItemName" type="button"><i class="fa fa-search"></i> Search</button> 
 
      </div> 
 
     </div> 
 
    </form> 
 
    <div class="row"> 
 
     <div class="form-group"> 
 
      <div class="col-sm-12 col-md-12 error-log"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="table" id="itemSearchResultContainer" style="overflow: auto; -ms-overflow-x: auto; -ms-overflow-y: auto; max-height: 500px;"> 
 
      <table class="table table-hover tablesorter" id="itemSearchResults"> 
 
       <thead> 
 
        <tr class="active"> 
 
         <th> 
 
          <input id="checkAllItems" type="checkbox"> 
 
         </th> 
 
         <th> 
 
          Item Number 
 
         </th> 
 
         <th> 
 
          Item Name 
 
         </th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="form-group" id="actionButtons"> 
 
      <input class="btn btn-primary btn-success pull-left" id="addItemName" type="button" value="Add Selection"> 
 

 
      <input class="btn btn-primary btn-success pull-right" id="replaceItemName" type="button" value="Replace Selection"> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
</div>

Jede Hilfe geschätzt wird.

Answer 1

Sie verpassen position:relative in der #itemSearchResultContainer Definition (demo)

#itemSearchResultContainer { 
    position: relative; 
    overflow: auto; 
    -ms-overflow-x: auto; 
    -ms-overflow-y: auto; 
    max-height: 500px; 
}