Why does my datable misalign after I click on the searchpane button and then change my data?

Larry27

https://www.baldwinproject.ca/app/sched40-ws.php
https://debug.datatables.net/amaxef
No Error messages are received
I seem to have gotten my code to reload data based on the onchange event of my select box, and it works great. The issue I am having is that if I click on the searchpane, and then click the select box, it returns my new data selection, but it mis-aligns the datatable. I'm not quite sure what's happening. I also notice when I check the debugger that it show 2 draws, not 1. I cannot understand why that is??

allan

When you say "searchpane", do you mean your Function dropdown list? I haven't been able to recreate the issue in Firefox if so.

I see it animating the header due to transition: all 0.3s ease; on the th elements. I'm not sure that's a great idea and might well cause the issue you are seeing if widths are read at the wrong time. Also you could remove the scrollY option in the DataTable to make the header and body columns exactly match.

Allan

Larry27

The transition is part of the .css I have been using as a template. I'll tinker with that

I've removed the Scroll Y.

The button labelled 'Filter Municipalities', opens the datatable searchpanes. That's what I mean by SearchPane

allan

Ah - thank you. I missed that.

I just tried it and I don't immediately see a misalignment. Is there a specific combination or set of steps I should use?

Allan

Larry27

The problem happens when you click on the 'Filter Municipalities' button and subsequently close the Searchpane, then go and select a different function, it misaligns when the recordset populates the datatable. I've checked the returned data and it is no different. If I select different functions, and don't click on the Filter Municipalities button, the data is always perfectly aligned, so clearly clicking that button and displaying the Searchpane has some impact on the datatable.