0

I'm making a chat-mockup for with html, css and AngularJS for a school assignment that looks a bit like this (very basics)

HTML

<div class="chat-box">
    <div class="chat-msg">
        <div class="chat-msg-user">User</div>
        <div class="chat-msg-text">Content</div>
    </div>
</div>
<div class="chat-msg-input">
    <input type="text" class="chat-msg-text-input" />
    <button data-ng-click="addMessage()">Send</button>
</div>

CSS

.chat-box {
    border: 1px solid black;
    padding: 10px;
    height: 200px;
    overflow: auto;
}
.chat-msg-user {
    border-bottom: 1px solid red;
}
.chat-msg {
    border: 1px solid red;
}

Angular

$scope.addMessage = function(){
    $scope.tempMessage.id = $scope.chat[0].chatmessages.length;
    $scope.tempMessage.user = $scope.user.name;
    $scope.tempMessage.sendDate = $scope.dateToString(new Date()).split('-')[0];
    $scope.tempMessage.sendTime = $scope.dateToString(new Date()).split('-')[1];

    $scope.chat[0].chatmessages.push($scope.tempMessage);

    $scope.tempMessage = {};

};

Fillde available here

As seen in the Fiddle I have a set height for the .chat-box and when the message overflow it the scrollbar appears (I'm not using JQuery, just for demo purposes).

Right now the .chat-msg is appended to the bottom of the .chat-box as I want it to, but you have to scroll down manually to see the latest messages. What I want is that it automatically scrolls down to the latest messages.

How do I do this? May it be with html, css or AngularJS

EDIT

Got it working using somae AngularJS in combination with the answer to this question.

Made a AngularJS function containing the answer which is called after ng-repeat ends.

/EDIT

Community
  • 1
  • 1
Liam de Haas
  • 1,258
  • 3
  • 18
  • 39
  • @NicoO that is basically my question, but the answer is javascript which I want to avoid because ii'm already using `AngularJS` – Liam de Haas Jul 02 '15 at 13:02
  • 1
    It may be best to use that as a solution as mixing pure javascript with `AngularJS` is common to get the best functionality out of it. It's a javascript framework after all. – TheLimeTrees Jul 02 '15 at 13:05
  • @TheLimeTrees guess you're right – Liam de Haas Jul 02 '15 at 13:07
  • There is nothing at all wrong with using regular javascript with angular, tons of custom directive solutions do. lots of times it's regular javascript tying into the working elements of angular. IMO you should make a custom directive and implement @NicoO 's linked solution. You could forgo the directive, but it would make for some clean separation. – ajmajmajma Jul 02 '15 at 13:10

0 Answers0