Grid not displaying on mobile unless desktop view is switched on

Murray

I have grids loading from php snippets in the Divi theme on Wordpress. Everything is fine on a desktop but only a white rectangle displays when the relevant pages are visible on a mobile (tablet or phone) until desktop view is switched on. Is there some setting that would rectify this please.

kthorngren

Are you using the Responsive extension? If so there is probably a setting you can use. Please post your Datatables init code. Better is a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Murray

The page is at https://bsapuk.org/outpost

The table is created by
<table id="outposts" class="display nowrap" width="100%"></table>

kthorngren

I'm not a CSS expert but it seems something in your environment is collapsing the table and the Datatables elements as the screens size shrinks. This screenshot shows the table exists:

I don't believe Datatables has any options or styling to do this. Maybe @allan or someone else can look and tell you what it is. In the mean time maybe you can test by removing divs or extra styling to see what is affecting the table display. I created the screenshot on my laptop so its easy to test.

Kevin

allan

You've got jQuery being loaded twice on the page, which is causing at least part of the problem. Once from our CDN include and once from:

<script type='text/javascript' src='https://bsapuk.org/wp-includes/js/jquery/jquery.min.js?ver=3.6.1' id='jquery-core-js'></script>

I'd suggest keeping that one, and moving the DataTables <script> tag after that, and removing the jq-3.6.0/ from it.

I'm also seeing a JS error on the page when loaded in a narrow view port that I'm not in desktop view. Could you load the non min JS file for DataTables and I can try to debug that?

Thanks,
Allan

Murray

Many thanks for your replies and time. I have changed the page to use non-minified js and not included jQuery in the download so the page should only be using the one from Wordpress. This still gives a white rectangle on a mobile until switching on Desktop View.

allan

In desktop mode, jQuery loads on line 301 of the page's source (which is before DataTables is loaded).

In phone mode, jQuery loads on line 729 of the page's source (which is after DataTables).

That's the problem. As to why jQuery is being loaded in different locations - I honestly have no idea. You'd need to check the theme's code.

A workaround would be to load DataTables after jQuery has been loaded, regardless of which mode it is in.

Allan

Murray

Many thanks Allan for that observation. It helped point in the right direction. Having switched off a bunch of alleged performance enhancing things in the theme, it is now working correctly.

allan

Awesome - thanks for letting us know.

Allan