two header are coming after adding scrollX: true in datatable

GE Power

two header are coming after adding scrollX: true in datatable. Please provide your input what i am doing wrong here or any solution

kthorngren

The example works:
https://datatables.net/examples/basic_init/scroll_x.html

Please post a test case showing the problem for troubleshooting.

Kevin

GE Power

I have tried the same example but its not working. Please find the images with two thead when scrollX is true and also with scrollX is false

tangerine

The example works, so you must have something different.
Your screen grabs don't help. Please provide a test case, as Kevin said.

kthorngren

I have tried the same example but its not working.

Are you saying that when you browse to this URL: https://datatables.net/examples/basic_init/scroll_x.html

You are seeing the same results as your uploaded files?

My first thought is something CSS related but would have to see your code. Please post a test case or link to your page showing the issue.

Kevin

GE Power

Please find the attached file and library loaded in index.html are below

<link rel="stylesheet" type="text/css" href="../js/DataTables-1.10.15/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="../js/Buttons-1.3.1/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="../js/Editor-1.6.2/css/editor.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="../js/Select-1.2.2/css/select.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="../js/Scroller-1.4.2/css/scroller.dataTables.min.css"/>

jquery-1.12.4.js
MomentJS-2.18.1/moment.min.js
DataTables-1.10.15/js/jquery.dataTables.min.js
Buttons-1.3.1/js/dataTables.buttons.min.js
Editor-1.6.2/js/dataTables.editor.min.js
Select-1.2.2/js/dataTables.select.min.js
JSZip-3.1.3/jszip.min.js
Buttons-1.3.1/js/buttons.html5.min.js
Buttons-1.3.1/js/buttons.print.min.js
Scroller-1.4.2/js/dataTables.scroller.min.js

---

other then these js and css i m using bootstrap and jqueryui for other purpose.
still i am facing issue as screenshot attached.

kthorngren

If all you are using is scrollX then you don't need to load the scroller extension.

I'm not sure how to run the test.zip code you attached. Someone else may be able to.

You mentioned that you are using jqueryui and bootstrap. Are they used on this page or other pages?

Someone more familiar may be able to help you but I don't understand your setup from the info provided nor how to use your attached code to troubleshoot.

Kevin

allan

The square boxes look like a font icon is being used to display sorting icons - which is what the Bootstrap integration does. You would get a square box if the icon font isn't available. That should really be shown in a message in the control.

I suspect if that is resolved then the second slimmer header will disappear.

other then these js and css i m using bootstrap and jqueryui for other purpose.

Are you loading the DataTables stylesheets for those libraries and DataTables' own styling? If so, that will be at least part of the issue. Only one of them should be loaded.

Allan

GE Power

Thanks kthorngren and Allan. It was CSS issue. i have resolved it. Appreciate your quick response.