WPdatatables in combination with OnePress theme (bootstrap dropdown issue) - javascript

I am really struggling with a Wordpress installation with the OnePress theme and use of WPdatatables plugin.
Everything is working flawlessly except for the dropdowns
- number of rows
- Filter by "genre"
There are no console errors whatsoever but the dropdowns are 1) not properly rendered and 2) I see the native dropdown caret and the bootstrap one.
I tried playing with custom css for hours with z-index as I presume this may be the culprit but am losing it right now.
See https://www.concordegand.be/bcweb-bibliotheque/
Does anyone have any pointers for me?
Regards

To answer myself:
Found out that OnePress theme uses Bootstrap 4 Alpha version. I modified core files so it uses Bootstrap 3.3.7 and all works fine now!

Related

Problem with transition in Bootstrap 5.5.2 on bundle.js

I tried to implement zoom.js used to zoom images like in medium site.
I linked both the css and js file, it works. But whenever I zoom out the transition doesn't work. I suspected the bootstrap's bundlejs file. I downgraded from 5.2.2 to 3.0.0 and it worked fine. I exactly don't know what's happening, please help me with that.
Thanks in advance!
I didn't knew what you have written in your code as you haven't attached it but I think what you have done is that you used code from the old bootstrap (3.0.0) and that code is changed for bootstrap 5.2.2. Bootstrap changes it's code a little bit in some versions and make documentation of it very clearly. You should go to it's documentation page for more assistance and you can also post your code here if you are unsure what is changed in bootstrap 5.

Is it possible to "isolate" my bootstrap .js function from other bootstrap version?

hope someone can help me. I need to add a javascript to multiple websites. And some of this websites have bootstrap, some don't. Some are using bootstrap 3 some 4. And one has also a customised version of bootstrap, where some function are modified.
I'm using bootstrap 4 and with SASS you can set a prefix for the bootstrap.css file. And this works fine. But how can I ensure that my bootstrap version is not overriding another bootstrap?
Is there a way to isolate the bootstrap.js?
Thanks.

Foundation for sites 6 - dropdown menu - javascript can initializate

I have just started a new site created with meteor and using foundation for sites and sass.
I want to create a dropdown menu, but I can't make it work.
I followed this link
dropdown menu and copied html, but it's not been showed as a dropdown menu.
I think my problem is because maybe I haven't initializated the javascript of the dopdown menu.
Can someone show me how to do it. In Zurbs site there are several examples, but loading the script in the head. But I want to know how to do it with meteor.
I might be completelly lost, so any help is really welcome.
This are the packages I have added to my meteor
zurb:foundation-sites
seba:minifiers-autoprefixer
fourseven:scss
To initialize the Foundation plugins you have to run the init code $(document).foundation();, make sure it is added after the foundation js file are included.
Also make sure that $(document).foundation(); is added after DOM has been rendered (at the bottom of html) or in window.onload event.
Took some hours once to find this out :P

Going from Bootstrap 2 => Bootstrap 3 ... Without Destroying Site Styles

I inherited a codebase that was using a 2.x version of Bootstrap. Recently I tried upgrading to Bootstrap 3 to fix a bug. It fixed the bug, but now my site is a disaster. Heading tags are bigger but not bold. My drop-downs don't look drop-downs, and my buttons don't look like buttons. And so on.
It seems to me that I have two options:
revert to Bootstrap 2, save my site, and find another way to fix my original problem (but then I'm stuck with 2 forever)
bite the bullet, spend hours comparing old site vs. new site and copying over all the styles from the old bootstrap in to a new bootstrap-fixes.css.
But, given that Bootstrap 3 has been out for awhile, I'm thinking maybe this is a solved problem (with a better solution than either of the above). One idea I had was to use the bootstrap customizer, which let's you override the base bootstrap styles. The only thing is, coming up with all of the customization options to customize Bootstrap 3 properly (ie. to look like Bootstrap 2) is about as much work as creating a bootstrap-fixes.css.
However, the customizer also takes a config.json file, which made me wonder:
Is there any publicly avaiable config.json for generating Bootstrap 3 styles that preserve the relevant Bootstrap 2 styles?
If not, is there any other way to get Bootstrap 3 JS, and some sort of matching CSS file (customized Bootstrap 3 CSS? upgraded Bootstrap 2 CSS? some sort of frankenstein's monster?) that will work with the JS, but not destory my site?
Thanks in advance for any help.
Bootstrap 2 is desktop first (graceful degradation). Bootstrap 3 was written from the ground up as mobile first (progressive enhancement). They are two completely different beasts. You need to re-design your site afresh mobile first with Bootstrap 3.
Here's an official list of what's changed:
Migrating to v3.x
You could try using some kind of automated tool but personally I just wouldn't trust these to get it right.

Bootstrap validation and Bootstrap select

Two really good bits of UI for Bootstrap 3.
Firstly, to validate field forms, the validation found here - http://bootstrapvalidator.com/
Secondly, the default style of the select element isn't great, I've used various methods in the past to style the select, however, usually come across browser render issues - this plugin works great with bootstrap - http://silviomoreto.github.io/bootstrap-select/
So I was quite happy with the above... until I tried using them together. The validation won't work (green tick fails to appear) when using the selectpicker to style the select.
Can these work in sync, if so, how!?
Have you had a look at the documentation for the Bootstrap validator? It mentions the Bootstrap Select plugin:
http://formvalidation.io/examples/bootstrap-select/
It seems to suggest they work together. If you're still having problems, it might be worth posting your code or a Bootply.
Edit: Sorry, I've just realised how old this post is (I found it on the newest questions bit, so didn't check), so I imagine it wasn't in the documentation then! I'll leave my answer anyway, just in case anyone stumbles across it asking the same question.

Categories