stream-chat-react icon indicating copy to clipboard operation
stream-chat-react copied to clipboard

bug: The issue of MessageList height

Open YohaanYoon opened this issue 3 years ago • 1 comments

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

  1. Go to Channel List
  2. Click on Channel
  3. The height of the MesageList is increased by messages, and Message Input will not be shown.

Expected behavior A clear and concise description of what you expected to happen.

The height of the MesageList will be fixed, and Message Input will be shown. It works normally in version 9.3.0. However, when I applied the 10.2.0 of the stream-chat-react to the chat service, the height of the MesageList is increased by messages, and Message Input will not be shown. (It works normally in https://getstream.io/chat/demos/messaging/. I guess the version of the stream-chat-react is same with me.)

The code is as follows:

    return (
      <div>
        <S.AppBar />
        <Chat client={chatClient} theme="messaging light" i18nInstance={i18n}>
          <Channel channel={channel}>
            <Window>
              <MessageList
                messageActions={MESSAGE_ACTIONS_CLASSTALK}
              />
              <MessageInput
                doFileUploadRequest={doFileUploadRequest}
                doImageUploadRequest={doFileUploadRequest}
              />
            </Window>
            <Thread />
          </Channel>
        </Chat>
      </div>
    );

chrome-capture-2022-9-14

Please let me know how to fix it.

If applicable, add screenshots to help explain your problem.

Package version

  • stream-chat-react: 10.2.0
  • stream-chat-css: 3.6.0
  • stream-chat-js: 7.1.0

Desktop (please complete the following information):

  • OS: OSX
  • Browser: chrome
  • Version: 106

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context

Add any other context about the problem here.

YohaanYoon avatar Oct 14 '22 08:10 YohaanYoon

@YohaanYoon I am not sure what's the problem with the setup - can you replicate it by forking this sandbox?

petyosi avatar Oct 17 '22 06:10 petyosi

@petyosi

I find the reason of the issue. I have troubled when I run react script build, so, I am imported css from import "stream-chat-react/dist/css/v2/index.css"; instead of import "stream-chat-react/dist/css/index.css";. Do I use import "stream-chat-react/dist/css/index.css";? You can see as following link: https://codesandbox.io/s/sweet-tree-2qk8wv

YohaanYoon avatar Oct 20 '22 05:10 YohaanYoon

@YohaanYoon the v2 theming mechanism leaves the layout to the integrator - you can check the additional styling that needs to be applied here: https://codesandbox.io/s/suspicious-architecture-q7lyr3?file=/src/styles.css

petyosi avatar Oct 20 '22 08:10 petyosi

Thank you!

YohaanYoon avatar Oct 21 '22 01:10 YohaanYoon