DataTables DOM Manipulation Not Working As Should

zgoforth

Link to test case: https://jsfiddle.net/BeerusDev/mznL52p8/15/

I altered the DataTables DOM to remove the information about the filter at the bottom, as well as pagination. In this Fiddle, it appears as the Search filter is left aligned above the datatable, but in my actual application (the code is identical) it looks like so: Why is that? And can I fix it?

colin

I'm not clear how you want it to be? If you want it to look like the test case, we'll need to see actual application where it's not behaving the same.

Colin

zgoforth

So I can't mimick the actual application where it isn't working properly. I have absolutely no idea as to why it is posting towards the middle. Frankly, it is very annoying and screws up the aesthetic of the DataTable. I am not sure if it has to do with SharePoint (maybe? Not sure why it would as none of the other datatables I have built have done this). I tried overriding with the following CSS

 .FilterStuff>div{float:none;}
 .dataTables_wrapper .FilterStuff .dataTables_filter {float:left}

and nothing worked. From your response, it seems like this is very unlikely to occur so I am just pooped, I do not know what to do or why it is doing it. My columns / colspan is correct I figured maybe that could be an issue but it isn't.

Here is my working example (using the exact same code as the one that is messing up, but the search bar is where it should be here I don't understand): https://jsfiddle.net/BeerusDev/mznL52p8/86/

zgoforth

When I run the debugger, I get this 1 problem that was found :

Table ID    Problem description
#myTable    The CSS for this table has `border-collapse: collapse` which is not supported by DataTables, particularly when scrolling is enabled. A collapsed border makes the column width calculations virtually impossible for alignment between columns. Please use `border-collapse: separate` and suitable border CSS statements to achieve the same effect.

Could this maybe have something to do with it?

kthorngren

Styling problems are difficult to troubleshoot without seeing the problem. If you are unable to provide an example showing the issue then you will need to look at the styles applied to the search input. Right click on the search input then select Inspect. You can see what is being applied and make changes to determine what is causing the issue.

Kevin

zgoforth

@kthorngren this CSS styling was able to fix the issue, thanks!

div.dataTables_wrapper div.dataTables_filter label {
    float: left !important;
}