2 files changed, 13 insertions, 7 deletions
diff --git a/webchat/public/client.js b/webchat/public/client.js
index e7179449..ca71b537 100644
--- a/webchat/public/client.js
+++ b/webchat/public/client.js
@@ -52,8 +52,11 @@ $(function connect() {
       console.log(object.message);
       var safe_message = $('<div/>').text(object.message).html();
       safe_message = replaceURLWithHTMLLinks(safe_message);
-  var safe_from = $('<div/>').text(object.from).html();
-  $('<tr><td class="chat_date">'+getCurTime()+'</td><td class="chat_from">'+safe_from+'</td><td class="chat_msg">'+safe_message+'</td></tr>').insertBefore('#foot');
+      var safe_from = $('<div/>').text(object.from).html();
+      $('<tr><td class="chat_date">'+getCurTime()+'</td><td class="chat_from">'+safe_from+'</td><td class="chat_msg">'+safe_message+'</td></tr>').insertBefore('#foot');
+
+      var elem = document.getElementById('chatter');
+      elem.scrollTop = elem.scrollHeight;
 
     } catch (error) {
       console.log(error);
diff --git a/webchat/public/reset.css b/webchat/public/reset.css
index 931ab453..3f9ecbb9 100644
--- a/webchat/public/reset.css
+++ b/webchat/public/reset.css
@@ -48,16 +48,13 @@ q:before, q:after {
 #chatbox {
   border-collapse: collapse;
   border-spacing: 0;
-  background-color: black;
   color: white;
-  border: 5px solid black;
   width: 100%;
-  height:100%;
-  opacity: 0.8;
+  vertical-align: bottom;
 }
 #input{
   width: 100%;
-  background-color: black;
+  background-color: #555555;
   border: 1px solid black;
   color: white;
 }
@@ -81,6 +78,12 @@ q:before, q:after {
 }
 #chatter {
   width: 75%;
+  height: 100%;
+  background-color: black;
+  opacity: 0.8;
+  overflow: auto;
+  overflow-x: hidden;
+  vertical-align: bottom;
 }
 .chat_date,.chat_from,.chat_msg{
 }