DataTables DOM Manipulation Not Working As Should
DataTables DOM Manipulation Not Working As Should
zgoforth
Posts: 493Questions: 98Answers: 2
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?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
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
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
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/
When I run the debugger, I get this 1 problem that was found :
Could this maybe have something to do with it?
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
@kthorngren this CSS styling was able to fix the issue, thanks!