stream-chat-react
stream-chat-react copied to clipboard
bug: The issue of MessageList height
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
- Go to Channel List
- Click on Channel
- 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>
);

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 I am not sure what's the problem with the setup - can you replicate it by forking this sandbox?
@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 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
Thank you!