Bootstrap Conflicts

[vincent-white]

Hi JC, first of all I love the script. Congratulations on the brilliant work so far.

I do seem to run into a problem with the program when using it with Bootstrap in which the add contact drop down box no longer appears. I spent a while tracing the problem back and the conflict seems to start if

//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css

Is included with the program. Is it possible to get a fix for this? I've tried with various different bootstrap css files and they all seem to create the same issue.

Cheers

[jcbrand]

Thanks!

The easiest thing to do is to prefix all css entries in converse.css with #conversejs

We did this previously when someone else had issues with bootstrap, but I see the CSS somehow reverted to a state without the prefix.

[matt-mcguire]

As Vincent and many others have said before, thank you for your work on Converse.js.

I have attempted to add #conversejs to all of the entries in converse.css and a lot of the spacing and formatting in the converse.js client goes wonky. Plus there are a few css styles that it currently relies on that are in the stylesheets/stylesheet.css (such as the default font face, link colors, link styles) which makes thinks even more tricky.

I look forward to being able to use Converse.js with bootstrap. Thanks again for all of your work.

[jcbrand]

Hi @matt-mcguire thanks for the feedback.

I'm not super happy with converse.js's CSS myself.

In theory converse should be completely independent of stylesheets/stylesheet.css (the latter only being used for the website http://conversejs.org).

I've now added the #conversejs prefix to the CSS in the master branch (which will become the 0.8 release) and fixed some padding/margin errors that came up after disabling stylesheets/stylesheet.css.

[jcbrand]

This should now be fixed.

[mraygalaxy]

I'm having this same issue again with bootstrap v3 . See my screenshot in #709