Hello William

The horizontal scroll works for me, but it seems to be doing that for the whole page, and there seems to be an overflow issue with some text being behind the table.

Issues like this usually occur when there is a conflict either with the theme currently active on your website, or another plugin you have installed.

Can you please change the theme and see if the issue is resolved? If not, then please deactivate all other plugins except for our plugin, refresh the page where the issue is, and see if it is resolved (it should be). If it is, then start activating other plugins one by one, and after each activation refresh the page to see if the issue reoccurred. Once it does reoccur, you will have found the plugin causing the issue.

Hey Will

Thanks for the feedback, I forwarded the ticket to our developers for checking.

Please provide me a temporary WP-admin (administrator) user for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue. 

We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course, we do not provide login data to third parties. 

You can write credentials here just check PRIVATE Reply so nobody can see them except us.

Hey William.

Our developers fixed it. Here's what they said:

Elementor tabs packs its own <div>s within which are our <div>s. The problem is that <div> in which our data is packed (the 1st parent above ours) sets "display: block" as a style, and that's why the whole table is being displayed. We've added the following CSS in global Settings/Custom JS and CSS/Custom CSS:

#elementor-tab-content-2481 {
    display: contents;
}

This ID can be found in HTML, so if you need additional IDs, you can simply continue the array, like this:

#elementor-tab-content-2481, #elementor-tab-content-*other_id* {
    display: contents;
}

Or, if you want this to apply to all Elementor tabs where you have wpDataTables, you can use:

.elementor-tab-content {
    display: contents;
}

Since all those <div>s have that class. We don't know on which other pages you're using wpDataTables, but the last CSS shouldn't mess anything up. If it does, please let us know, and we'll try and find a more specific selector, but we're fairly certain that it will work fine with just the last CSS in Settings/Custom JS and CSS/Custom CSS section.

Please let me know.

Oh, OK, William, I'll forward it to our developers again.

Hi again William

Since you used this:

.elementor-tab-content { display: contents!important;
}

And you have 2 <div>s on the page with the class "elementor-tab-content" (one of which should always be hidden), our developers modified the CSS so it's only:

.elementor-tab-content.elementor-active { display: contents!important;
}

It should resolve the problem.

Since you're changing the tabs (Players/Gods) below the table on the mobile, our developers can't say that this is coming from us, but is in fact packed in Elementor, since the structure of HTML looks like this:

->Elementor wrapper
-------->elementor title that represents the Players tab
-------->elementor content that contains our table
-------->elementor title that represents the Gods tab

So, wpDT is inside some Elementor <div>, and they're ordered as they appear on the page. We're not sure how exactly Elementor packs all this, but it shouldn't be coming from us.

We can only suggest some custom CSS that should resolve this. For example:

@media only screen and (max-width: 500px) {
        .elementor-tabs-content-wrapper {
                display: flex;
                flex-direction: column-reverse;
        }
        
        .elementor-tab-mobile-title[aria-controls="elementor-tab-content-2482"] {
                order: 1
        }
        
                .elementor-tab-mobile-title[aria-controls="elementor-tab-content-2481"] {
                order: 2
        }
}

Let me know if this helps.

Awesome, Will, thanks for letting me know!

If you have any further questions or issues, please feel free to open a new ticket, and we'll gladly help.