search

conversejs / converse.js

Web-based XMPP/Jabber chat client written in JavaScript
http://conversejs.org
Mozilla Public License 2.0
3.06k stars 765 forks source link

Bootstrap 3.3.7 Collipsable panels conflict #1440

Open Morzilla opened 5 years ago

Morzilla commented 5 years ago

Hello everybody! I'm trying to use ConverseJS overlayed chat into my website, but I have a problem with the Bootstrap Collipsable panels (I use the latest 3.3.7 bootstrap version): when I try to open or collpase a panel, something (often) it's reopening immediately without any animations, or some mess happens, like the text in the second panel that appears in overlay over the panel itself that is closed. If i comment out the ConverseJS javascript everything works fine...as soon as I re-insert that script the problem appears again.

I used this example code for the collipsable panels:

question 1?

Lorem ipsum dolor sit amet.

question 2?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna.

Question 3?

Lorem ipsum dolor

Do you have any hints? Thanks!

--- Want to back this issue? **[Post a bounty on it!](https://app.bountysource.com/issues/69911288-bootstrap-3-3-7-collipsable-panels-conflict?utm_campaign=plugin&utm_content=tracker%2F194169&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://app.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F194169&utm_medium=issues&utm_source=github).
jcbrand commented 5 years ago

Are you sure it's the converse JavaScript and not the converse CSS?

Converse.js uses bootstrap 4 and uses bootstrap.native for JS support for bootstrap CSS. However, in Boostrap 4 panels have been replaced with cards and I don't see anything in bootstrap.native that refers to "panels".

Morzilla commented 5 years ago

Are you sure it's the converse JavaScript and not the converse CSS?

Converse.js uses bootstrap 4 and uses bootstrap.native for JS support for bootstrap CSS. However, in Boostrap 4 panels have been replaced with cards and I don't see anything in bootstrap.native that refers to "panels".

Thanks for the reply! Yep, I'm sure, because if I comment out the CSS nothing changes (the problem is still present), but if I comment out the JS the problem is solved.

I use this version of converse.JS:

<script src="https://cdn.conversejs.org/4.1.0/dist/converse.min.js" charset="utf-8"></script> <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.conversejs.org/4.1.0/css/converse.min.css" />

image

Maybe it's a click event in the converse.js script that cuase the problem?

jcbrand commented 5 years ago

The core converse.js code won't be causing this problem because all the click events are scoped to be inside the #conversejs DOM element.

However, perhaps bootstrap.native has registered a handler that interferes.

Ideally we should find a way to scope bootstrap.native's code to only be active inside the #conversejs element as well. That might mean that we have to fork the code, but perhaps it can be done in a way that they'll merge our change back into the main branch.

Echolon commented 3 years ago

Is this still a valid issue?

jcbrand commented 3 years ago

Yes, this will still be a valid issue until we get rid of Bootstrap JavaScript for Converse or until we find a way to isolate the Converse DOM from any other Bootstrap code running in the page.

For the 2nd option, we can add a setting to enable the shadow DOM for the converse-root element. I think that could solve this issue.