I am seeing some strange behavior with tablesorter when I have sticky headers enabled and buttons in a column. When the buttons are enabled, they correctly disappear "under" the header as I scroll the rows up. However, when the buttons are disabled, they do not disappear "under" the header as the scroll up - instead, they appear above the header. See the images for what I mean. The first image shows the problem )buttons disabled) while the second image shows correct behavior (buttons enabled) (the header is the light blue with the "Action" text):
Your help is greatly appreciated.
EDIT 1:
Table sort version is 2.18.3
Here is the table js and the css for both the enabled and disabled buttons:
$('#tablesorter-ap-list').tablesorter({
theme : 'blue',
headerTemplate: '{content} {icon}',
widgets : ['zebra','columns', 'cssStickyHeaders', 'uitheme'],
sortList :[[0,0]],
headers: {},
widthFixed : true,
widgetOptions: {
cssStickyHeaders_offset : 0,
cssStickyHeaders_addCaption : true,
// jQuery selector or object to attach sticky header to
cssStickyHeaders_attachTo : null,
cssStickyHeaders_filteredToTop : true,
cssStickyHeaders_zIndex : 10
}
});
Here is the css for an enabled button column (two buttons in this example):
<td>
<a type="button" class="btn btn-success btn-xs" href="/hs/bk/ae/986/cac:cac_top/" role="button">Edit</a>
<a type="button" class="btn btn-success btn-xs" href="/hs/bk/av/986/cac:cac_top/">View</a>
</td>
And here is the css for the disabled button case. It's interesting to note that it does not matter if one or both buttons are disabled - as long as one is disabled, the incorrect scroll behavior is exhibited):
<td>
<a type="button" disabled class="btn btn-success btn-xs" href="/hs/bk/ae/954/cac:cac_top/" role="button">Edit</a>
<a type="button" class="btn btn-success btn-xs" href="/hs/bk/av/954/cac:cac_top/">View</a>
</td>
It looks like it's an issue with stacking context. When a button is disabled, Bootstrap applies an opacity
to the button; this causes the stacking issue with the thead
which uses a transform.
I found this solution which restores the opacity and changes the back & changes the background color (demo):
a.btn[disabled] {
opacity: 1;
background-color: rgba(0,128,0,0.3);
border-color: rgba(0,128,0,0.3);
}