[IONIC 4] Scroll to bottom on chat page

Ionic Framework ionic-v3
22

feels freaking bad, it is just as you said, it’s a content function and you can’t use it for components, try looking for other way to scroll to the bottom, i just found this one

https://stackoverflow.com/questions/18614301/keep-overflow-div-scrolled-to-bottom-unless-user-scrolls-up/44051405#44051405

check the code pen, apparently it works fine and it is applied to a div

23

Oh god I managed to find the solution. It was CSS related ! :astonished:

Just changed this:

.messages-container {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    overflow: hidden;
    margin: 0 auto;
}

To:

.messages-container {
    min-height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    overflow: hidden;
    margin: 0 auto;
}
2 Likes
24

And you’re using the scroll to bottom on content?

25

Yes, on the ion-content element !

Now I have a problem with my keyboard which is above the last chat messages (it doesn’t scroll enough), but I’ll check it later I think, unless you already had this problem and know what to do, I won’t bother you more !

Thanks a lot for your help, that really helped me !

1 Like
26

Hmm I faced something similar IONIC 4 click event bug, I have to double click?

Always man

27

Thanks, I’ll check it and if I don’t find the solution, it’s ok, I don’t need it right now, I have some time left on this issue

28

another question, how did you do a refresh on other user’s end? when you send message? as I used this method, and the other user are not getting the page unless they reload the page manually

29

Hi, can anyone tell me. How can achieve the scrollToBottom() with ionic-react?
I have tried this:-

getContent() {
return document.querySelector(‘ion-content’);
}
scrollToBottom = () => {
this.getContent().scrollToBottom(500);
}

It’s showing me error, "Object is possibly ‘null’. "
How can I achieve this. Thanks in advance for any help.