Deepchat width not stretching full 100%

[phammer]

Hi, great work with deep-chat.

I am prototyping an app using it and found an issue with the 100% on the DeepChat component which seems to not work correctly in context of a Bootstrap.js container.

Reproduction: https://codepen.io/phammer/pen/jOJRBvP

The screenshot shows that even though DeepChat gets 100% width, it doesn't fill the container.

[OvidijusParsiunas]

Hi @phammer!

Deep Chat styling was constructed to fit as many different parent styling situations as possible, with that we had to let go of certain default css properties to prevent unwanted styling behaviours that devs would have had to find and undo. The down-side of this is ofcourse when devs want particular css behaviours, they may need to a little more tinkering to get it to work. Nevertheless, we settled on the add more styling values for more functionality over remove/undo styling to prevent unwanted existing functionality.

I'm sorry to hear this has caused you issues. Thankyou for sharing a live codepen example and I have a simple solution to your problem:

You can add a display: block property to the style e.g:

style="display: block; border-radius: 10px; width: 100%; height: calc(100vh - 20vh);"

Other display values will also fill the parent container width.

Let me know if this helps! Thanks!

[phammer]

Hi @OvidijusParsiunas ,

thx for the fast response! Well appreciated. Yes, that absolutely helps. Thx for spotting it. I assumed there might be some width calculation going on in the component, but this is perfect.

Have a great day, and keep up the amazing work!

[OvidijusParsiunas]

Thankyou @phammer!