Adapting Deep Chat dimensions to the parent application elements

[2531800823]

export const App: FC = () => {
  return (
    <div style={{ width: 500, height: 200 }}>
      <DeepChat
        initialMessages={initialMessages}
        style={{ width: '100%', height: '100%' }}
        chatStyle={{
          width: '100%',
          height: '100%',
          borderRadius: '8px',
        }}
      ></DeepChat>
    </div>
  );
};

dome

[2531800823]

Because I want him to be dynamic when I reseize. react-resize-detector will cause him to repeat render ,Please help me with a good solution. thank you!

[OvidijusParsiunas]

Hi @2531800823, If you want the chat component to fill the dimensions of the parent element. All you need to do is use the 'inherit' dimension values:

chatStyle={{
  width: 'inherit',
  height: 'inherit'
}}

Here is the live example.

Let me know if this helps.

[2531800823]

If its parent element is 100% then it will fail。 Here is the live example.

[2531800823]

I want to make changes in the window so that it automatically ADAPTS to the screen size。

[OvidijusParsiunas]

To help with element positioning/adaptability around other elements, you can use the display style property. So in this example you can use the 'block' value:

chatStyle={{
  display: 'block',
  width: 'inherit',
  height: 'inherit',
  borderRadius: '8px',
}}

Here is a live example. Let me know if you have further questions.

[2531800823]

thank you!

[OvidijusParsiunas]

I will be closing this issue since it has been resolved. However, if you need any assistance in the topic of this thread feel free to comment below, otherwise you can raise a new issue. Thanks!