Upgrade Datatables from V 1.10.7 to V 1.13.4 issue
Upgrade Datatables from V 1.10.7 to V 1.13.4 issue
gunalan87
Posts: 7Questions: 1Answers: 0
After upgrading datatables, Table td width remains same for all columns instead of width based on content.
Can anyone guide me through ?
Answers
You'll need to post a link to a page showing the issue please. I'm not aware of an issue that would cause what you describe.
Allan
Table cells(th,td) takes same width across the table, not based on width of the content for example if we have 15 cells of different content width, for every cells width is same like 50px
It's not in this example here, so as Allan said, we'll need to see it to able debug. 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.
Colin
After using Datatable debugger in my page, I have 5 common issues.
THE TABLE HAS SCROLLING ENABLED AND THE HEADER AND BODY PARTS OF THE TABLE ARE MISALIGNED. THIS IS TYPICALLY CASED BY THE TABLE BEING INITIALISED WHEN IT IS HIDDEN. IN THIS CASE, THE TABLE NEEDS TO HAVE THE
COLUMNS.ADJUST()METHOD CALLED ON IT WHEN THE TABLE IS MADE VISIBLE. THIS EXAMPLE SHOWS HOW THAT CAN BE DONE WITH BOOTSTRAP TABS.THIS TABLE HAS
MAX-WIDTHAPPLIED TO ITS CSS WHICH CAN CAUSE ISSUES, PARTICULARLY IN SAFARI. SETTING MAX-WIDTH WILL NOT ALLOW THE TABLE TO EXPAND BEYOND THE VALUE GIVEN, MEANING THAT COLUMN ALIGNMENT AND SCROLLING CAN BE EFFECTED.THIS TABLE HAS
MAX-WIDTHAPPLIED TO ITS CSS WHICH CAN CAUSE ISSUES, PARTICULARLY IN SAFARI. SETTING MAX-WIDTH WILL NOT ALLOW THE TABLE TO EXPAND BEYOND THE VALUE GIVEN, MEANING THAT COLUMN ALIGNMENT AND SCROLLING CAN BE EFFECTED.THE TABLE HAS SCROLLING ENABLED AND THE HEADER AND BODY PARTS OF THE TABLE ARE MISALIGNED. THIS IS TYPICALLY CASED BY THE TABLE BEING INITIALISED WHEN IT IS HIDDEN. IN THIS CASE, THE TABLE NEEDS TO HAVE THE
COLUMNS.ADJUST()METHOD CALLED ON IT WHEN THE TABLE IS MADE VISIBLE. THIS EXAMPLE SHOWS HOW THAT CAN BE DONE WITH BOOTSTRAP TABS.DATATABLES V1 IS NO LONGER SUPPORTED. PLEASE UPDATE TO THE LATEST VERSION OF DATATABLES, WHICH AVAILABLE ON THE DATATABLES DOWNLOAD PAGE.
TABLES WHICH HAVE SCROLLING ENABLED SHOULD HAVE THEIR WIDTH SET TO BE 100% TO ALLOW DYNAMIC RESIZING OF THE TABLE. THIS SHOULD BE DONE WITH A
WIDTH="100%"ORSTYLE="WIDTH:100%"ATTRIBUTE. USINGWIDTH:100%IN YOUR CSS IS UNFORTUNATELY NOT ENOUGH AS IT IS VERY DIFFICULT TO READ A PERCENTAGE VALUE FROM STYLESHEETS!USING
WIDTH:100%IN YOUR CSS IS UNFORTUNATELY NOT ENOUGH AS IT IS VERY DIFFICULT TO READ A PERCENTAGE VALUE FROM STYLESHEETS!How to overcome this issue ?
Add
style="width: 100%"to your HTMLtabletag.Allan
@allan I understood, I made table width = 100% but it didn't work well.
TABLES WHICH HAVE SCROLLING ENABLED SHOULD HAVE THEIR WIDTH SET TO BE 100% TO ALLOW DYNAMIC RESIZING OF THE TABLE. THIS SHOULD BE DONE WITH A WIDTH="100%" OR STYLE="WIDTH:100%" ATTRIBUTE. USING WIDTH:100% IN YOUR CSS IS UNFORTUNATELY NOT ENOUGH AS IT IS VERY DIFFICULT TO READ A PERCENTAGE VALUE FROM STYLESHEETS!
Here is an example using 1.13.11 which works:
https://live.datatables.net/pocomexi/1/edit
There is something specific with your page causing the issue. Without seeing what you have it will be very difficult for us to help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Maybe you can update my example to show the issue.
Do you get errors in the browser's console?
Kevin
You upgraded. Did you remove all the references (.css and .js) to 1.10.7? If not maybe you have a CSS conflict.
Are you using a styling framework like Bootstrap? If yes, are you using the Datatables style integration files for that framework?
Did you make other changes when you upgraded?
Kevin
I am getting all cell width same just like below.
<tr>
<th style="width:80px;">Head 1</th>
<th style="width:80px;">Head 22</th>
<th style="width:80px;">Head 333</th>
<th style="width:80px;">Head 4444</th>
<th style="width:80px;">Head 55555</th>
</tr>
Required following output.
<tr>
<th style="width:70px;">Head 1</th>
<th style="width:72px;">Head 22</th>
<th style="width:74px;">Head 333</th>
<th style="width:76px;">Head 4444</th>
<th style="width:78px;">Head 55555</th>
</tr>
Also Horizontal Scroll has come
@kthorngren
No errors in the browser's console
Removed all the references (.css and .js) to 1.10.7
I am using Bootstrap styling framework.
Without being able to see it, it is impossible to debug. Please create a test case at https://live.datatables.net or JSFiddle, if you can't link to the page you are working on.
Allan
@allan I made a testcase and here is the link
https://live.datatables.net/cotoderi/1/
If the above testcase is not conclusive, plz msg
The test case doesn't run, it's giving errors. Please can you fix that so we can see the failure you want support with,
Colin
The script and CSS files you included don't exist. With that corrected, it works no problem: https://live.datatables.net/cotoderi/2/edit .
Allan