Responsive Plugin Not Working

bsharpe17

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.

allan

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

bsharpe17

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!

allan

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

bsharpe17

Allan,

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

allan

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

bsharpe17

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.

allan

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

Allan

bsharpe17

Thank you for the support!

allan

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

bsharpe17

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.

aldemarcalazans

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=

allan

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

aldemarcalazans

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

aldemarcalazans

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.

allan

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

Allan