Bootstrap collapsible chat widget issue

Question

http://bootsnipp.com/snippets/featured/collapsible-chat-widget In the collapsible chat widget above if the chat is open any controls on the same level as the widget cannot be clicked. Is there a way to allow other controls to be clicked when the chat is open?

Answer 1

The issue could be due to the container height growing as the chat widget expands which would cover up any content outside of .container with the full width .container element.

You can avoid this by removing the surrounding .container, .row and .col-md-5 and wrap the widget in its own wrapper setting a width and display: inline-block; to stop the container from overlapping other content.

See http://bootsnipp.com/snippets/x8G9R for an example. There are a number of ways to achieve the same result, this is just one example.

I've used position: fixed; with my example as it would presumably be useful to be visible whilst scrolling.