Responsive Plugin Not Working

Responsive Plugin Not Working

bsharpe17bsharpe17 Posts: 11Questions: 2Answers: 0

Hello,

I know this is a common issue with tables inside a tab because the width of the window cannot be calculated since the tab is not visible when the page first load. However, my problem is that i have a side navigation menu on the left side of my site. Since this menu is not visible by the program when the page is first loaded, I believe this is causing the width calculation for the datatable to be off. The responsive table works fine on my phone because the navigation menu remains on the top of the table. Therefore, I believe my assumption is correct. I have been trying to use the tab example to figure out how to fix my problem, but I haven't been able to find a solution. If you would like to replicate my issue, please go to unus.site/Clients . I have created a test login for anyone who would like to replicate this problem. Login: test@example.com and password: 123456

This is something I have been working on for personal use and is still under development, so please don't judge lol. Thank you for any help in advance.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 50,277Questions: 1Answers: 7,472 Site admin

    What do I need to do to reproduce the issue on the page? If I just load it, the "Active Clients" table (which is the only one visible) appears to work without any issue.

    Thanks,
    Allan

  • bsharpe17bsharpe17 Posts: 11Questions: 2Answers: 0

    Allan,

    Thank you for your quick response. You can go here to replicate the problem. This is another place where I am hosting the same site for testing. Thank you for your help!

  • allanallan Posts: 50,277Questions: 1Answers: 7,472 Site admin

    Thanks for the link. I'm afraid I don't immediately know why it isn't working. Could you use the non-.min versions of both DataTables and Responsive and I'll try to trace it through. Actually, if you could use the nightly versions that would be useful as well.

    Thanks,
    Allan

  • bsharpe17bsharpe17 Posts: 11Questions: 2Answers: 0

    Allan,

    I have included the nightly versions to my site. Please let me know if you need anything else. Thank you for your help!

  • allanallan Posts: 50,277Questions: 1Answers: 7,472 Site admin

    Hi,

    It looks like the Responsive and DataTables files are being loaded in the wrong order at the moment:

        <script type="text/javascript" language="javascript" src="https://nightly.datatables.net/responsive/js/dataTables.responsive.min.js">
        </script>
        <script type="text/javascript" language="javascript" src="https://nightly.datatables.net/js/jquery.dataTables.min.js">
        </script>
    

    Could you reverse them for me? Assuming that doesn't fix it (I doubt it will, but it will at least mean Responsive runs on the page rather than throwing an error), could you use the dataTables.responsive.js file, rather than the min version?

    Thanks,
    Allan

  • bsharpe17bsharpe17 Posts: 11Questions: 2Answers: 0

    Hi Allan,

    Thank you for your feedback. I have changed the order and used the non-.min versions. As you assumed, it did not fix it. Please let me know if you need anything else.

  • allanallan Posts: 50,277Questions: 1Answers: 7,472 Site admin

    Thanks - I'll dig into it and get back to you.

    Allan

  • bsharpe17bsharpe17 Posts: 11Questions: 2Answers: 0

    Thank you for the support!

  • allanallan Posts: 50,277Questions: 1Answers: 7,472 Site admin
    Answer ✓

    That one was on the tricky side of things!!! The issue comes form the use of display: table on the body element. Tables have slightly odd behaviour when it comes to width - specifically that when they have content that overflows, they just expand to the required size. So because the table's content was quite wide, it would just expand to fill that. Then when Responsive tries to calculate the width, it just sees the size of the table with its contents, so it can't get any smaller.

    It works when really small because the body is display: block.

    The fix is to use:

    body {
      table-layout: fixed;
    }
    

    The CSS already has width: 100% - the table-layout just tells the browser that you aren't messing around and you really want it to be 100% rather than to expand as it would by default.

    Btw - are you aware that the theme is GPL? I'm not sure what the implications of all your other software is in terms of licensing.

    Allan

  • bsharpe17bsharpe17 Posts: 11Questions: 2Answers: 0

    Wow, that was impressive, Allan! I would not have been able to figure that one on my own. Thank you for your help and the awesome software you've created.

    As per the theme, yes, I'm aware. I'm just using it for personal purposes at the moment. In the future, I plan to change it, so that other people can use it as well. Thanks again for the support.

  • aldemarcalazansaldemarcalazans Posts: 12Questions: 1Answers: 0

    Try using version 2.0.0 of dataTables.responsive.min.js. All versions above this one are bugged.
    I warned DataTables group about it, many months ago, but they did nothing about it!

    https://dropbox.com/s/j1k4fe3ajymru49/dataTables.responsive.min-2.0.0.zip?dl=

  • allanallan Posts: 50,277Questions: 1Answers: 7,472 Site admin

    Hi @aldemarcalazans - you've posted that message in a number of threads now. However, in your original thread reporting an issue I've not yet had a response from you. Could you link to a test case showing the issue please?

    Allan

  • aldemarcalazansaldemarcalazans Posts: 12Questions: 1Answers: 0

    I will try to create a test instance, in my production server, to show you the problem (I do not have another server where I could do that).

  • aldemarcalazansaldemarcalazans Posts: 12Questions: 1Answers: 0

    Hi Allan. This is the page where I am using version 2.0.0 of dataTables.responsive.min.js

    www10.trf2.jus.br/conciliacao/resultados/resultado-mutiroes-de-conciliacao-2016/

    And this is the page where I am using version 2.1.1 of dataTables.responsive.min.js

    www10.trf2.jus.br/administracao/resultados-teste/

    I am using the WordPress plugin TablePress 1.4, but the problem also happened with another plugin, Inline Google Spreadsheet Viewer, and was solved downgrading the version of the JS file already mentioned.

  • allanallan Posts: 50,277Questions: 1Answers: 7,472 Site admin

    Thanks for the test case. Rather than having the same discussion in two different places, let's continue it in your other thread.

    Allan

Sign In or Register to comment.