The column filters in the header disappear when i add scrollX:true

KEshav09

Hi team , i have requirement where i have around 12 columns which will be hidden in the beginning and the user can view the columns accordingly . I have already built a column filter which consist of check boxes which appears on mouseover on the thead
Now when i add the scroll:X as true for the datatable the column filter which i have appended to the column header appears behind the table like its hidden behind the table itself the following is the code used for the column filter

 api.columns([3, 4, 5]).every(function () {
              var column = this;
              var showSelection = $(
                '<div><img src="/images/arrow_downward.svg"></div>'
              ).appendTo($(column.header()));
              //   $('<span> ⌄ </span>').appendTo(
              //     $(column.header())
              //   );

              var select = $(
                '<div id="selected' +
                  column.index() +
                  '"><label class="labelforfilter"></label></div>'
              )
                .appendTo($(column.header()))
                .on("change", function () {
                  var vals = $(":checked", select)
                    .map(function (index, element) {
                      return $.fn.dataTable.util.escapeRegex($(element).val());
                    })
                    .toArray()
                    .join("|");

                  column
                    .search(
                      vals.length > 0 ? "^(" + vals + ")$" : "",
                      true,
                      false
                    )
                    .draw();
                });

              column
                .data()
                .unique()
                .sort()
                .each(function (d, j) {
                  select.append(
                    '<label id="label' +
                      j +
                      '" class="labelforfilter">' +
                      d +
                      "<input id=" +
                      d +
                      ' type="checkbox" value="' +
                      d +
                      '"></label>'
                  );
                });
            });

corresponding css for the column filters : width: 100px;
position: absolute;
background-color: white;
line-height: 1.9;
border-radius: 5px;
grid-template-rows: auto auto auto auto;
display: grid;
justify-content: center;
align-items: center;
/* flex-direction: column; */
box-shadow: 0 2px 10px #0000001a;
z-index: 1000;

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Can you look to a treat case showing the issue please?

Allan

KEshav09

please take a look at the above image the filter is going under the table if i give scrollX:true

and thats how it normally appears

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin