DataTables now applying 0px width and squashing content

DataTables now applying 0px width and squashing content

sjw01sjw01 Posts: 63Questions: 34Answers: 1

I am not sure if something has changed however, my DataTables have all started squashing up inside the browser, wrapping all text within the cells to a minimum width instead of neatly expanding to the the div container.

I have noticed that an inline style of width: 0px is being applied to the table. I have checked everywhere and I cannot see anywhere that I have applied a 0px width so I am assuming this is a "feature" of DataTables?

  1. Is it normal to have a width: 0px applied to all DataTables?
  2. Is there a way to stop it?

Answers

  • colincolin Posts: 12,630Questions: 0Answers: 2,157

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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.

    Cheers,

    Colin

  • sjw01sjw01 Posts: 63Questions: 34Answers: 1

    I found a solution to this.
    The problem appeared to be an initialisation issue. If the table is initialised before the data is ready, the table initalizes with a 0px width because there is no data for the DataTable to estimate required width.
    I fixed this by adding a small timeout before initialising:

    setTimeout(function(){initialiseDataTable();}, 100);

  • kthorngrenkthorngren Posts: 13,799Questions: 25Answers: 3,246

    Do you have style="width:100%" applied to the table tag as shown in this example?

    Kevin

Sign In or Register to comment.