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

gunalan87gunalan87 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

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    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

  • gunalan87gunalan87 Posts: 7Questions: 1Answers: 0
    edited April 26

    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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • gunalan87gunalan87 Posts: 7Questions: 1Answers: 0

    After using Datatable debugger in my page, I have 5 common issues.

    1. 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.

    2. THIS TABLE HAS MAX-WIDTH APPLIED 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.

    3. THIS TABLE HAS MAX-WIDTH APPLIED 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.

    4. 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.

    5. DATATABLES V1 IS NO LONGER SUPPORTED. PLEASE UPDATE TO THE LATEST VERSION OF DATATABLES, WHICH AVAILABLE ON THE DATATABLES DOWNLOAD PAGE.

    6. 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!

  • gunalan87gunalan87 Posts: 7Questions: 1Answers: 0

    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 ?

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    Add style="width: 100%" to your HTML table tag.

    Allan

  • gunalan87gunalan87 Posts: 7Questions: 1Answers: 0

    @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!

  • kthorngrenkthorngren Posts: 21,289Questions: 26Answers: 4,943

    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

  • kthorngrenkthorngren Posts: 21,289Questions: 26Answers: 4,943
    edited April 26

    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

  • gunalan87gunalan87 Posts: 7Questions: 1Answers: 0

    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.

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    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

  • gunalan87gunalan87 Posts: 7Questions: 1Answers: 0
    edited April 29

    @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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • allanallan Posts: 63,434Questions: 1Answers: 10,458 Site admin

    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

Sign In or Register to comment.