title: Answering bot title position & send button not working
body: <p>Before I ask my questions, let me show you the full code for the project I'm working on (I'm making a bot that answers questions given some key words. It's a very easy code developed by Deni Spasovski).</p>
  
  <p>This is the main HTML file:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;script type="text/javascript" src="chat.js"&gt;&lt;/script&gt;
  
  
  &lt;style&gt;
  * {
    box-sizing: border-box;
  }
  
  body {
    background-color: #edeff2;
    font-family: "Calibri", "Roboto", sans-serif;
  }
  
  .chat_window {
    position: absolute;
    width: calc(100% - 20px);
    max-width: 800px;
    height: 500px;
    border-radius: 10px;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
    overflow: hidden;
  }
  
  .top_menu {
    background-color: #fff;
    width: 100%;
    padding: 20px 0 15px;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
  }
  .top_menu .buttons {
    margin: 3px 0 0 20px;
    position: absolute;
  }
  .top_menu .buttons .button {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    position: relative;
  }
  .top_menu .buttons .button.close {
    background-color: #f5886e;
  }
  .top_menu .buttons .button.minimize {
    background-color: #fdbf68;
  }
  .top_menu .buttons .button.maximize {
    background-color: #a3d063;
  }
  .top_menu .title {
    text-align: center;
    color: #bcbdc0;
    font-size: 20px;
  }
  
  .messages {
    position: relative;
    list-style: none;
    padding: 20px 10px 0 10px;
    margin: 0;
    height: 347px;
    overflow: scroll;
  }
  .messages .message {
    clear: both;
    overflow: hidden;
    margin-bottom: 20px;
    transition: all 0.5s linear;
    opacity: 0;
  }
  .messages .message.right .text {
    color: #45829b;
  }
  .messages .message.appeared {
    opacity: 1;
  }
  .messages .message .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-block;
  }
  .messages .message .text_wrapper {
    display: inline-block;
    padding: 20px;
    border-radius: 6px;
    width: calc(100% - 85px);
    min-width: 100px;
    position: relative;
  }
  .messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
    top: 18px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .messages .message .text_wrapper::after {
    border-width: 13px;
    margin-top: 0px;
  }
  .messages .message .text_wrapper::before {
    border-width: 15px;
    margin-top: -2px;
  }
  .messages .message .text_wrapper .text {
    font-size: 18px;
    font-weight: 300;
  }
  
  .bottom_wrapper {
    position: relative;
    width: 100%;
    background-color: #fff;
    padding: 20px 20px;
    position: absolute;
    bottom: 0;
  
  }
  .bottom_wrapper .message_input_wrapper {
    display: inline-block;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #bcbdc0;
    width: calc(100% - 160px);
    position: relative;
    padding: 0 20px;
     word-wrap: break-word;   
      word-break: break-word;
      -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }
  .bottom_wrapper .message_input_wrapper .message_input {
    border: none;
    height: 100%;
    box-sizing: border-box;
    width: calc(100% - 40px);
    position: absolute;
    outline-width: 0;
    outline:none;
    color: gray;
  }
  .bottom_wrapper .send_message {
    width: 140px;
    height: 50px;
    display: inline-block;
    border-radius: 7px;
    background-color: #a3d063;
    border: 2px solid #a3d063;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s linear;
    text-align: center;
    float: right;
  }
  .bottom_wrapper .send_message:hover {
    color: #a3d063;
    background-color: #fff;
  }
  .bottom_wrapper .send_message .text {
    font-size: 18px;
    font-weight: 300;
    display: inline-block;
    line-height: 48px;
  }
  
  .message_template {
    display: none;
  }
  
  
  &lt;/style&gt;
  
   &lt;style type="text/css"&gt;
  
          .answerbot-input
          {
              color: #1AA1E1;
          }
          .answerbot-ai
          {
              color: #CE5043;
          }
  
      &lt;/style&gt;
  
  &lt;/head&gt;&lt;body&gt;
  
  
  
  
  &lt;div class="chat_window"&gt;&lt;div class="top_menu"&gt;&lt;div class="buttons"&gt;&lt;div class="button close"&gt;&lt;/div&gt;&lt;div class="button minimize"&gt;&lt;/div&gt;&lt;div class="button maximize"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="title"&gt;Chat&lt;/div&gt;&lt;/div&gt;
  &lt;div class="bottom_wrapper clearfix"&gt;
  
  &lt;div class="subcontent" id='subcontent'&gt;
                      &lt;p class='answerbot-ai'&gt;
                          Don't be afraid, talk to me.
                      &lt;/p&gt;
                  &lt;/div&gt;
  
  &lt;div class="message_input_wrapper"&gt;
  &lt;input class="message_input" placeholder="Type your message here..." onkeyup="keypressInput(this, event);"/&gt;
  &lt;/div&gt;&lt;div class="send_message"&gt;
  &lt;div class="icon"&gt;&lt;/div&gt;&lt;div class="text"&gt;Send&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/li&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript" src="scripts.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="data.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          var _answerBot = new answerBot();
          function keypressInput(sender, event) {
              if (event.which == 13) {
                  document.getElementById('subcontent').innerHTML += _answerBot.processInput(sender.value);
                  sender.value = '';
  
              }
          }
  
  
      &lt;/script&gt;
  
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>This is the scripts.js file:</p>
  
  <pre><code>var answerBot = function () {
      var _this = this;
      _this.processInput = function (text) {
          updateUrl(text);
          var _result = "&lt;p class='answerbot-input'&gt;" + text + "&lt;/p&gt;";
          text = text.replace(new RegExp("[ ]{2,}", "g"), " ");
          var _words = text.toLowerCase().split(" ");
          var _answers = [];
          var _title = "";
          if (_words.length === 0 || _words.toString() === '') { //if the input is empty
              _answers = _this.specialContext.emptyInput;
              _title = _this.specialContext.emptyInput;
          } else {
              var _possibleAnswers = findMatches(_words);
              if (_possibleAnswers.length === 0) { //if no answer found
                  _answers = _this.specialContext.wrongInput;
                  _title = _this.specialContext.wrongInput;
              }
              if (_possibleAnswers.length == 1) { //context recognized
                  _answers = _this.answers[_possibleAnswers[0]].values;
                  _title = _this.answers[_possibleAnswers[0]].description;
              }
              if (_possibleAnswers.length &gt; 1) {
                  _result += formatText(_this.specialContext.rephrase, _this.specialContext.rephrase);
                  for (var i = 0; i &lt; _possibleAnswers.length; i++) {
                      _result += formatText(_this.answers[_possibleAnswers[i]].description, _this.answers[_possibleAnswers[i]].description);
                  }
              }
          }
          if (_answers.length &gt; 0) {
              var _rand = Math.floor((Math.random() - 0.001) * _answers.length);
              _result += formatText(_answers[_rand], _title);
          }
          return _result;
      };
  
      function formatText(text, title) {
          return "&lt;p class=\'answerbot-ai\' title=\'" + title + "\'&gt;" + text + "&lt;/p&gt;";
      }
  
      function findMatches(words) {
          var foundKeywords = [];
          var _possibleAnswers = [];
          for (var i = 0; i &lt; _this.keywords.length; i++) {
              foundKeywords[i] = 0;
              for (var j = 0; j &lt; words.length; j++) {
                  if (_this.keywords[i].keys.indexOf(words[j]) &gt;= 0) {
                      foundKeywords[i]++;
                      if (foundKeywords[i] == _this.keywords[i].keys.length) {
                          return [_this.keywords[i].value];
                      }
                  }
              }
              if (foundKeywords[i] * 2 &gt; _this.keywords[i].keys.length) {
                  _possibleAnswers.push(_this.keywords[i].value);
              }
          }
          return _possibleAnswers.filter(function (elem, pos) {
              return _possibleAnswers.indexOf(elem) == pos;
          });
      }
  
      function updateUrl(text){
          history.pushState(null, null, "#question=" + encodeURIComponent(text));
          if(typeof ga === "function")//google analytics
              ga('send', 'event', 'question', text);
      }
  };
  </code></pre>
  
  <p>And this is the data.js file:</p>
  
  <pre><code>if (answerBot) {
      answerBot.prototype.specialContext = {
          "wrongInput": ["I don't understand you.", "Could you rephrase the question?"],
          "emptyInput": ["Please say something", "Speak louder", "Well i can't read minds."],
          "rephrase": ["Can you tell me if your question was about one of the following things:"]
      };
  
      answerBot.prototype.keywords = [
          { "keys": ["hi"], "value": 0 },
          { "keys": ["hello"], "value": 0 },
          { "keys": ["life", "universe", "everything"], "value": 1 },
          { "keys": ["software", "development"], "value": 2 },
          { "keys": ["software", "engineering"], "value": 2 },
          { "keys": ["who", "made", "you"], "value": 3 },
          { "keys": ["who", "wrote", "you"], "value": 3 },
          { "keys": ["who", "coded", "you"], "value": 3 },
          { "keys": ["is", "this", "real", "life"], "value": 4 },
          { "keys": ["who", "is", "deni"], "value": 5 },
          { "keys": ["tell", "me", "about", "deni"], "value": 5 },
          { "keys": ["tell", "me", "about", "author"], "value": 5 },
          { "keys": ["show", "me", "author"], "value": 5 },
          { "keys": ["can", "see", "source"], "value": 6 },
          { "keys": ["can", "see", "sourcecode"], "value": 6 },
          { "keys": ["show", "me", "code"], "value": 6 },
          { "keys": ["how", "are", "you"], "value": 7 },
          { "keys": ["who", "is", "this"], "value": 8 }];
  
      answerBot.prototype.answers = [
          {
              "description": "Hi!",
              "values": ["Hello there!", "Hi how can I help you today", "Hi! What brings you here?"]
          },
          {
              "description": "What is the answer to life the universe and everything?",
              "values": ["42"]
          },
          {
              "description": "What is software development?",
              "values": ["Programming! Do you speak it?"]
          },
          {
              "description": "Who created me?",
              "values": ["I was created by another &lt;a href='http://about.me/deni' target='_blank'&gt;bot&lt;/a&gt;.", "The question is who sent you here?"]
          },
          {
              "description": "Is this real life?",
              "values": ["No this is the internetz!", "Find out &lt;a href='http://www.youtube.com/watch?v=txqiwrbYGrs' target='_blank'&gt;yourself&lt;/a&gt;!"]
          },
          {
              "description": "Who is Deni?",
              "values": ["This is his &lt;a href='https://plus.google.com/+DeniSpasovski/' target='_blank'&gt;G+ profile&lt;/a&gt;.", "This is his &lt;a href='www.linkedin.com/in/denispasovski' target='_blank'&gt;Linkedin profile&lt;/a&gt;."]
          },
          {
              "description": "Where is your source?",
              "values": ["Here is the &lt;a href='https://github.com/denimf/Answer-bot' target='_blank'&gt;source&lt;/a&gt;."]
          },
          {
              "description": "How are you?",
              "values": ["I'm good how are you?"]
          },
          {
              "description": "Who is this?",
              "values": ["StackOverflow Exception occurred", "The question is who are you?"]
          }
          ];
  }
  </code></pre>
  
  <p>As you can see, the chat works very well answering questions and I'm looking forward to implementing it with the questions I want to be answered. However, I'm having some issues that, despite how much I try, I can't seem to fix! (I don't know that much about coding, I apologize in advance!)</p>
  
  <ol>
  <li>I can't fix the title on top. If you write enough, it will end up disappearing because new messages push it out of the chat window.</li>
  <li>I can't seem to allow scrolling to see past messages... I've tried with overflow scroll and it doesn't work... The messages are fixed and I can't move up the timeline</li>
  <li>I can't get the Send button to work either! The chat only works with the Enter key.</li>
  </ol>
  
  <p>Thank you very much!!</p>