Samuel Samuel - 1 month ago 10
AngularJS Question

Appending divs to html body at runtime are overlapping each other

Here is the working plunker which is almost implemented. The issue is that the chat divs are getting added to the body at runtime using

$compile
but they are inheriting same css class and so overlapping each other, i.e:

.chat-window{
bottom:0;
position:fixed;
float:right;
margin-left:10px;
}


What css do I need to add , so that they open side-wise rather than overlapping each other.

Little help please

Answer

Try this plunker which calculates box count and accordingly provides its position

var setPixel = function (chatWindowNumber) {
            if (chatWindowNumber > 0) {
                return (chatWindowNumber * 410) + 'px';
            } else {
                return 0;
    }

  };

and append like below:

angular.element(document.getElementById('main-html-body')).append(
      $compile("<div chat-box \n\
                    id=" + scope.user + "\n\
                     class='row chat-window col-xs-5 col-md-3' \n\
                       incoming-msg='incomingMsg' \n\
                         open-chat-user-list='openChatUserList' \n\
                            user='user' \n\
                           count='count' style='position: fixed;bottom:0; right: " + setPixel(scope.count.p) + "'></div>"
         )(scope)
  )