CODEWITHSUNDEEP
cssangularjs
Samuel
Samuel

Reputation: 1406

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

Upvotes: 1

Views: 308

Answers (2)

Shashank Vivek
Shashank Vivek

Reputation: 17494

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)
  )

Upvotes: 0

Pim
Pim

Reputation: 728

Maybe add a wrapper around the chat windows and fix position that, then float the chat window div's themselves? Something like (untested):

1. Fixed wrapper with floating children

HTML

<div class="chat-wrapper">
   <div class="chat-window"></div>
   <div class="chat-window"></div>
   <div class="chat-window"></div>
</div>

CSS

.chat-wrapper {
  position: fixed;
  bottom: 0;
}

.chat-window {
  position: relative;
  float: left;
  margin-left: 10px;
}

2. Flexbox solution

CSS

.chat-wrapper {
   position: fixed; 
   bottom: 0;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
}

Upvotes: 1

Related Questions