[proposal:question]

[remotejob]

How make chat-scroll work something like:

https://github.com/theomessin/vue-chat-scroll do ?

[MatheusrdSantos]

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.

[MatheusrdSantos]

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>

[remotejob]

In my case it don't work, it don't make auto scroll to last message :(

[MatheusrdSantos]

Now I understand your problem. You want to scroll until the last message (the most recent) after sending or receive a new message.

[MatheusrdSantos]

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.

[MatheusrdSantos]

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

[remotejob]

Hmm.. It's not what I am need.

check https://vue-chat-app-d4b9e.firebaseapp.com/

source https://www.djamware.com/post/5d63586ee8e5fff670f31169/vuejs-tutorial-building-firebase-realtime-chat-web-app

input position always fixed. Chat part auto scroll to latest message.

[iseesaw]

Hmm.. It's not what I am need.

check https://vue-chat-app-d4b9e.firebaseapp.com/

source https://www.djamware.com/post/5d63586ee8e5fff670f31169/vuejs-tutorial-building-firebase-realtime-chat-web-app

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>

[remotejob]

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.