The Xamin theme includes Bootstrap 4.1, but wpDataTables is on Bootstrap 3.3.7. I've reviewed public tickets, but toggling the Bootstrap checkbox from the wpDataTables settings doesn't seem to help - actually get more errors if the full version isn't included. When I look at dropdown lists, I see 2 carets, and when I try to click them I get the attached error screen saying that popper.js is required. I can see on the network tab it's being downloaded, but another versioning issue perhaps?
Bootstrap v4 requires popper.js since it contains the dropdown.js library which is dependent on it. You need to make some changes to the theme. In file the functions.php file (usually in wp-content/themes/xamin/functions.php) you'll see something like this:
This will be overwritten when the theme is updated, so maybe a better solution would be to add the following hook to the functions.php file of your theme or the child theme:
function bootstrap_dequeue_script() {
$pageID = get_the_ID();
// here will be replaced id of the page where is our table
// Can be found when you edit that page in URL for post parametar
// Example if id is 1 (..post.php?post=1&action=edit..)
if ($pageID == 1){
wp_dequeue_script('bootstrap');
wp_enqueue_script( 'bootstrap-popper', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js', array('jquery'), null, true );
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array('jquery','bootstrap-popper'), '3.3.5', true );
}
}
add_action( 'wp_print_scripts', 'bootstrap_dequeue_script', 100 );
You need to make sure the bootstrap file is located in the correct path, so double-check "assets/js/bootstrap.min.js".
Then, when you access the table and go to the Customize/Custom CSS field, add this:
// For example we insert id of the table 1, but you need to replace it with your table id
.wpDataTablesFilter[data-wpdatatable_id="1"] .dropdown-toggle::after {
display:none !important;
}
.wpDataTableID-1 .dataTables_length .length_menu.show{
display:inline-block !important;
}
It should be working fine after that.
If you have issues with this, please provide us with a temporary wp-admin user (Administrator), along with FTP access credentials, so we can do it for you.
Please note that this is a public ticket, so make sure to enable the PRIVATE response if you're sending us credentials.
I was able to get the dequeue to work but I had to comment the bootstrap enqueue - leaving it made the edit modal button not work. And then I had to tweak the Custom CSS to
And that made the double carets disappear. Things seem to be living together okay now - I might try messing with the bootstrap piece a little more to see if things can work in nonconflict mode. Thanks for the direction here!
Curious if > Bootstrap 3 is on the roadmap at all?
No luck - I need to leave "Include full bootstrap on Frontend" on, and just not include Xamin's version for things to work. I'll make a child theme with these changes and call it for now. Thanks!
Our developers are going to work with newer versions of Bootstrap, hopefully soon. I don't have an ETA on it yet, but they said we're already behind schedule on it due to some priority issues they had to work with.
The Xamin theme includes Bootstrap 4.1, but wpDataTables is on Bootstrap 3.3.7. I've reviewed public tickets, but toggling the Bootstrap checkbox from the wpDataTables settings doesn't seem to help - actually get more errors if the full version isn't included. When I look at dropdown lists, I see 2 carets, and when I try to click them I get the attached error screen saying that popper.js is required. I can see on the network tab it's being downloaded, but another versioning issue perhaps?
Hello Ben
Thank you for reaching out to us.
Bootstrap v4 requires popper.js since it contains the dropdown.js library which is dependent on it. You need to make some changes to the theme. In file the functions.php file (usually in wp-content/themes/xamin/functions.php) you'll see something like this:
Above that line add this:
This will be overwritten when the theme is updated, so maybe a better solution would be to add the following hook to the functions.php file of your theme or the child theme:
You need to make sure the bootstrap file is located in the correct path, so double-check "assets/js/bootstrap.min.js".
Then, when you access the table and go to the Customize/Custom CSS field, add this:
It should be working fine after that.
If you have issues with this, please provide us with a temporary wp-admin user (Administrator), along with FTP access credentials, so we can do it for you.
Please note that this is a public ticket, so make sure to enable the PRIVATE response if you're sending us credentials.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
I was able to get the dequeue to work but I had to comment the bootstrap enqueue - leaving it made the edit modal button not work. And then I had to tweak the Custom CSS to
And that made the double carets disappear. Things seem to be living together okay now - I might try messing with the bootstrap piece a little more to see if things can work in nonconflict mode. Thanks for the direction here!
Curious if > Bootstrap 3 is on the roadmap at all?
No luck - I need to leave "Include full bootstrap on Frontend" on, and just not include Xamin's version for things to work. I'll make a child theme with these changes and call it for now. Thanks!
Thanks for getting back to me on this, Ben.
Our developers are going to work with newer versions of Bootstrap, hopefully soon. I don't have an ETA on it yet, but they said we're already behind schedule on it due to some priority issues they had to work with.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables