使用append()动态插入指令正在改变css行为

Question

我正在尝试实现聊天窗口并找到这个工作的柱塞。虽然，我的实现处于非常初级阶段，但当我添加新的聊天窗口指令时，我将面临CSS行为问题。我的实现柱塞在这里。

发行：

我实现的plnkr适用于单个聊天窗口，但一旦第二/第三个窗口打开，聊天窗口的最小化就会从下滑到上升。

这肯定是因为我

<div id="chat-space"></div>

在我的指令中执行如下操作：

angular.element(document.getElementById('chat-space')).append(
    // trying to dynamically add the chat windows over here.   
    $compile("<div chat-toggle user-name="+scope.userName+" count='count'></div>")(scope)
 )

我认为只要在css中稍加调整，就可以解决这个问题。谢谢！

Answer 1

这是一个html和css问题，我已经编辑了您更新的普鲁克尔，它现在运行良好，

我在chat-toggle的目标元素中添加了两个新的类(如下所示)，问题是chat-toggle的每个实例都与其父元素的宽度相同，因此会导致不正常，请检查以下内容。

.w50{
  width:50%;
}

.inline{
  display:inline-block;
}