Closed remotejob closed 4 years ago
You can set a fixed height or even a max-height to the parent element that contains the chat. So it will have the same size as the parent component and, if it gets greater, the chat content will scroll.
You can have some DOM structure like that:
<div class="chat-container">
<Chat></Chat>
</div>
and have the following style:
<style>
.chat-container{
height: 500px;
}
<style>
In my case it don't work, it don't make auto scroll to last message :(
Now I understand your problem. You want to scroll until the last message (the most recent) after sending or receive a new message.
That's strange behavior, maybe a bug. I guess it was implemented already. I'll fix this bug in the next few hours and release a new version with the option to set the chat behavior through props.
Fixed here b4648d6da39f57f0ed67d39f07aa45b4184b9f74. Now you can set the chat behavior by just adding the following property:
<Chat
scroll-bottom="scrollBottom"
>
</Chat>
scrollBottom: {
messageSent: true,
messageReceived: false
}
You just have to update the chat component to version 1.0.8
Hmm.. It's not what I am need.
check https://vue-chat-app-d4b9e.firebaseapp.com/
input position always fixed. Chat part auto scroll to latest message.
Hmm.. It's not what I am need.
check https://vue-chat-app-d4b9e.firebaseapp.com/
input position always fixed. Chat part auto scroll to latest message.
you can set the height,and then it will work
<div style="height=500px;">
<Chat.../>
</div>
I decide use https://www.npmjs.com/package/vue-scrollto and as base https://www.djamware.com/post/5d63586ee8e5fff670f31169/vuejs-tutorial-building-firebase-realtime-chat-web-app
in my case it more flexible solution. So you can close issue. Thanks.
How make chat-scroll work something like:
https://github.com/theomessin/vue-chat-scroll do ?