deep-chat ignoring max-width css property

[matthiasamberg]

I try to center the deep-chat component and also make its width adapt to the browser window width. It should use up most of the screen (95vh) but only up to a width of 500px.

I can set the component that way, however inner elements don't seem to adhere to the max-width property?

Here is a basic example:

If you change the width of the result window, you'll see that the inner elements move according to the width but don't take max-width into account.

https://jsfiddle.net/3o7f54yt/1/

(Is this a bug or what am I doing wrong?)

[OvidijusParsiunas]

Hi @matthiasamberg. All you need to do in your example is change the width: inherit styling to width: 100%. So the code would be like this:

<div id="center" style=" width:95vw; max-width:500px;height:200px; margin:auto">
  <deep-chat style="width:100%;max-width:inherit;"></deep-chat>
</div>

[matthiasamberg]

Thanks for your reply, indeed the toy example works. However it seems to fall apart again when I add a request property to the deep-chat tag:

request='{ "url": "localhost:8080", "method": "POST", "websocket": false, "additionalBodyProps": { "width": "100hw" } }'

Please see the following example: https://jsfiddle.net/bLtkuzno/10/

If you remove the request property it will work again (resize and center as in the example above)

[OvidijusParsiunas]

It's a little weird, but if you set display: block the sizing will work as required. So the full code would be:

<div id="center" style="width: 95vw; max-width: 500px; height: 200px; margin: auto">
  <deep-chat
    style="width: 100%; max-width: inherit; display: block"
    request='{
      "url": "localhost:8080",
      "method": "POST",
      "websocket": false,
      "additionalBodyProps": {"width": "100hw"}
    }'
  ></deep-chat>
</div>

[OvidijusParsiunas]

Also, thankyou for your sponsorship and I will include your name in all the mentioned sections.

[matthiasamberg]

Hi Ovidijus, don't bother about the mentions, I don't to make more work for you. Thank you for deep-chat!

[matthiasamberg]

Thank you! It now works perfectly with display: block!