桌面分揀機（叉）粘頭不粘在jquery模式對話框

Question

我試圖在jQuery模式對話框中使用tablesorters（叉）stickyheaders應用粘貼頭。

jquery modal還包含應用於屬性的引導樣式。

粘滯標題被創建，我可以從檢查HTML和屏幕上進行檢查，但在滾動表格時它會一直向下滾動。

看起來像一些CSS問題，但我不明白它到底是什麼。

這裏是一個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>

任何幫助將不勝感激。

Answer 1

你在#itemSearchResultContainer定義缺失position:relative（demo）

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