Why does data-table table last header not align with last column?

Why does data-table table last header not align with last column?

setbonsetbon Posts: 4Questions: 1Answers: 0

Please see https://stackoverflow.com/questions/45404833/why-does-data-table-table-last-header-not-align-with-last-column
I was suggested to insert the code table.columns.adjust(); but I don't know where to place it.

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    table.columns.adjust().draw();

    This needs to run after the Datatable is displayed. I'm not sure how Foundation works but maybe you need to move it from line 1110 to between 1112 and 1113 - between these two lines, like this:

          }).foundation();
         table.columns.adjust().draw();
          </script>
    

    Kevin

  • setbonsetbon Posts: 4Questions: 1Answers: 0

    Hi Kevin, thanks for suggestion. I just moved it but nothing changed...anything else I could try ?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    How are you fixing the header?

    I see you are loading the Datatables FixedHeader code. I don't see how or if you are using it but its not compatible with scrollX and scrollY:
    https://datatables.net/extensions/fixedheader/

    If this is the case I don't think table.columns.adjust().draw() will fix your issue.

    Kevin

  • setbonsetbon Posts: 4Questions: 1Answers: 0

    Based on your last comment I deactivated <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.foundation.css"/> and and reloaded but still no change...

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    There are 2 FixedHeader CSS and 2 FixedHeader JS files you are loading. I'm not sure where or how you are enabling it. Or if you are using something else for FixedHeader.

    Since you have only 42 rows a simpler test maybe to comment out scrollX, scrollY and scrollCollapse.

    Kevin

  • setbonsetbon Posts: 4Questions: 1Answers: 0

    on http://iprobesolutions.com/learn/wireless-conference-system-comparison I commented out all the files I found which mentioned FixedHeader and I made ScrollX, scrollY and scrollCollapse all "false". It looks like it did the trick!!!

    Thank you very very much. If you like to comment on SO I can approve your answer ?

This discussion has been closed.