테이블 분류기 (fork) jquery 모달 대화 상자에 sticky 헤더가 붙어 있지 않음

Question

tablesorters (fork) stickyheaders를 사용하여 jquery 모달 대화 상자 안의 테이블에 sticky header를 적용하려고합니다.

jquery 모달에는 속성에 적용된 부트 스탭 스타일이 포함되어 있습니다.

스티키 헤더가 만들어지고 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; 
}