Search code examples
cssbotframeworkweb-chat

Using bootstrap with Microsoft WebChat breaks the chat bubble

I want to use the webchat plugin together with Bootstrap 4. As soon as I put the webchat into a site with Bootstrap the chat box gets clipped on both sides.

If I inspect the element I can see that overflow is hidden. If I toggle that off then the chat bubble is entirely visible, but the user input is broken.

As an example, on the attached picture the left chat is being clipped. The text should say "Just now" but actually reads "st now".

enter image description here

If I use the webchat script in a plain HTML site with no bootstrap then it works as expected.

How would I go about resetting the styling so that it works within Bootstrap 4?

Solution

  • It looks like the row class in Bootstrap is conflicting with the row class in WebChat. Add this to your CSS to keep Bootstrap from adding a margin to the rows in Webchat:

    #webchat .row {
  margin: 0;
}

    Hope this helps!