Table formatting destroyed, may be due to conflicting CSS

Table formatting destroyed, may be due to conflicting CSS

jakisjakis Posts: 2Questions: 0Answers: 0
edited June 2011 in General
Hello, I have been using Datatables for a few weeks now, and I am loving its functionality.
However, I have found that if I try to use Datatables inside an already fully formatted website, it does not like that at all, and starts doing weird things, mainly with the column widths.

To be more specific, I have started using the Orchard CMS (http://www.orchardproject.net/), when I convert my project using Datatables into an Orchard module, Datatables goes haywire. The table is very squished horizontally, not allowing the data to fit in one line. As a result, some rows are as many as 4 lines high due to the text inside being all bunched up, and every time I click on a header to sort the table, all the columns change size and the table height varies drastically as well.

I have tried setting bAutoWidth to both true and false with no success, and I even had some columns widths set previously (that worked before Orchard came in), using aoColumns.
My theory is that Orchard's page formatting is conflicting with something inside Datatables, who knows.

If anyone has experienced this before (Not specifically with orchard, but any case where the columns are messed up) and has advice, it would be much appreciated.

Maybe there is even just a way to clear surrounding formatting?

Replies

  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin
    Have you get the table set to width:100% and is it visible (i.e. not display:none) when the table is initialised (the latter one is what normally causes the problem you describe)? It might be an idea to disable DataTables and see what formatting is on the table - then enable it and see what the difference is.

    Allan
  • jakisjakis Posts: 2Questions: 0Answers: 0
    Well thanks! width:100% did the trick, as far as I can tell. So the column width issue is out of the way. But I'm still having the issue of the table header titles not being bold or center aligned, etc.
    I am referencing the correct CSS file, I think, else the rows wouldn't be zebra-striped. I also tried hard coding it.
    (eg. [code] Configuration [/code] )

    I'm thinking this isn't as much a Datatables issue as much as just conflicts with Orchard...
  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin
    Possibly Orchard has a CSS reset in it and it is resetting any styles that my stylesheets are trying to apply. The order of the CSS loading would effect that. Firebug might give a clue as to what order the CSS is being applied in and what is overriding what.

    Allan
This discussion has been closed.