Search code examples
javascripttablesorter

tablesorter incorrectly scrolls disabled buttons with sticky headers


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):

tablesorter incorrect disabled button behavior

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>

Solution

  • 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);
    }