1

I'm currently working on a chat on a webpage for a project, but I have encountered a problem with the chat. When I write a new message, the message appears under the (hidden) chatbox and I have to manually scroll to see the messages. I'm working with Jade, CSS and JS but have not found a solution.

I have a div called #chatwrapper and inside that I have .content

this is the Jade 

        .formwrapper
           form(id='messageform', action='', method='GET')
           textarea(class='form-control1' type='text' id='messagefield'autocomplete='off') 
           input(class='pure-button' type='submit' id='sendmessage' value='send')

this is the CSS 

#chatwrapper {
  float: left;
  background-color: none;
  height:100%;
  width:380px;
  text-align: center;
  color: white;
  margin-left: 5px;
  margin-right: 5px;
}

CSS for the content

    #chatwrapper .content, #feedwrapper .content{
  height: 440px;
  overflow: auto;
  background-color: #EDEDED;
  margin: 6px;
  border-radius: 5px;
  box-shadow: 0 0 3px 1px #888888;
George
  • 6,630
  • 2
  • 29
  • 36
Adil Arhzane
  • 11
  • 2
  • 1
    add a fiddle or codepen or a link or something. The actual html would help a bit – Vlad Pintea Jun 03 '15 at 13:43
  • 2
    possible duplicate of http://stackoverflow.com/questions/7373081/how-to-have-a-textarea-to-keep-scrolled-to-the-bottom-when-updated – Eric Jun 03 '15 at 14:12
  • possible duplicate of [Scroll to bottom of div?](http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div) – Timothy Groote Jun 03 '15 at 14:53

0 Answers0