bad display?

Hello,
This is most probably a Theme conflict, or perhaps a conflict coming from another Plugin on Site.
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(or Theme) causing the issue.
We hope that helps.

• This reply was modified 10 months, 1 week ago by wpDataTables.

its theme Porto :/

Hello again,
Apologies for replying so late to this issue.
Thank you for that confirmation.
We determined there is a conflict with the Porto Theme.

Here is a workaround you can do to fix it.

They are using this in the theme:

add_action( 'admin_enqueue_scripts', 'porto_admin_css', 1000 );
add_action( 'admin_enqueue_scripts', 'porto_admin_scripts', 1000 );

This means that whatever we do, their scripts will be executed last, and they are including those scripts on all admin pages, not only of theirs, which is not recommended by WordPress codex. 

So, we need to do the same thing, but with a lower priority, for example 1001, but just in case we set it to be 1100.

So, to fix the admin part, you need to add the following to the functions.php of the Theme or even better in a child theme, so then, this modification would stay unaffected by Theme updates :

function wdtRemoveEmbedScript (){
    if (isset($_GET['page']) && (strpos($_GET['page'], 'wpdatatables') !== false)) {
        wp_dequeue_style('porto_admin');
        wp_dequeue_style('porto_admin_bar');
        wp_dequeue_script('porto-admin');
    }
}
add_action( 'admin_enqueue_scripts', 'wdtRemoveEmbedScript', 1100 );

That fixes the admin ( back-end) part.

As for the front-end – the theme is using Bootstrap 4, so you can fix the display length with this:

.wpdt-c .wpDataTablesWrapper .dataTables_length .bootstrap-select .dropdown-toggle:after {
        display:none !important;
}
.wpDataTables .dataTables_length .btn-group.bootstrap-select.length_menu.show {
    display: inline-block !important;
}
.wpDataTables .dataTables_length .dropdown-menu.open.show {
    transform: none !important;
}

You will add that code in the Main Plugin settings/Custom JS and CSS/Custom CSS.
Let us know how it goes, that should fix the conflict.
Thank you.

• This reply was modified 9 months, 3 weeks ago by wpDataTables.