Samuel Samuel - 1 year ago 56
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

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


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

Little help please

Answer Source

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:

      $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>"
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download