CODEWITHSUNDEEP
cssoverflow
elias_t
elias_t

Reputation: 83

CSS overflow value for chat

I build a chat application and i have an issue with the overflow property i think.. I want when a user connects to chat to show him the last message without him have to scroll down to the last message.When a user connects to chat by default it shows the first message and user have to scroll down. my css is:

.chat{
  height: 175px;
  width: 488px;
  margin: 0 auto;
  background-color: #000;
  padding: 20px 40px;
  border: solid 1px black;
  overflow: auto;
}

Any suggestions?

Upvotes: 2

Views: 3052

Answers (2)

Linus Caldwell
Linus Caldwell

Reputation: 11058

Per default overflow happens to right or bottom. You have to use some other technique for this.

One would be: Use a wrapper and position your chat messages absolutely to bottom:

<div id="wrapper">
    <div id="chat"></div>
</div>

With css:

#wrapper{
    position: relative;
    height: 175px;
    width: 488px;
    overflow: hidden;
}

#chat{
    position: absolute;
    bottom: 0;
}

Upvotes: 6

Matt Cain
Matt Cain

Reputation: 5768

You can't do this purely with css, you'll need to use javascript.

var chatDiv = document.getElementsByClassName('chat')[0]; //I assume you only have one chat box!
chatDiv.scrollTop = chatDiv.scrollHeight;

Upvotes: 7

Related Questions