table sorter (fork) sticky header not sticky in jquery modal dialog

Question

I am trying to apply sticky header on a table inside a jquery modal dialog using tablesorters(fork) stickyheaders.

jquery modal also contains bootstap styling applied to attributes.

Sticky Header is created, I can check from inspecting HTML and also on screen but it keeps scrolling down as table is scrolled.

Seems like some CSS issue but I am not getting what exactly it is.

Here is a 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++){
                    	tbody.append(row);
                    	i++;
                    }
                    
                  $('#itemSearchResults').tablesorter({
                      widgets: ['stickyHeaders'],
                      widgetOptions: {
                          // jQuery selector or object to attach sticky header to
                          stickyHeaders_attachTo: '#itemSearchResultContainer',
                          stickyHeaders_offset: 50
                      }
                  });
        				}
    });

        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>

Any help will be appreciated.

Answer 1

You're missing position:relative in the #itemSearchResultContainer definition (demo)

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