Home/ Questions/Q 8634079
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T09:37:54+00:00

I am implementing a chat system in my web app and I am showing

  • 0

I am implementing a chat system in my web app and I am showing the message list (where new messages will be appended below) and a message box where the user can type in their messages.

enter image description here

The current issue I am facing is that the message box gets pushed down the screen as I add new messages to the list (appended to bottom of last row).

How can I fix the position of the message box on the screen so that it doesn’t get pushed down?

To clarify, the message box will always be below the last message in the list. This means that I would need the page to auto scroll so that the message box will always stay in position i.e. in the center of the screen

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As you’ve not shared any markup, I’ve made one demo of mine…So inorder to stop your input box pushed down, you need to use overflow-y: scroll; on your message box and give it a fixed height to it like this : My Fiddle

    HTML

    <div class="container">
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
</div>
<input type="text" />​

    CSS

    .container {
height: 200px; 
width: 200px; 
background-color: #ff0000; 
overflow-y: scroll;
}​
    • 0