append（）を使って動的に指令を挿入すると、CSSの動作が変化する

Question

私はチャットウィンドウを実装しようとしており、this working PLUNKERが見つかりました。私の実装は非常に初期段階ですが、新しいチャットウィンドウディレクティブを追加すると、CSSの動作の問題に直面しています。 My implemented plunkerここに。

問題：

マイしかし、すぐに第二/第三の窓が開いているとして、単一チャットウィンドウのため正常に動作しますplnkr実施し、スライドさアップにスライドダウンからチャットウィンドウの変更の最小化。私が何か実行して、私のディレクティブ内部

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

を追加していますので、

そのは確かに：私はCSSで少し微調整と考える

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

を、それを解消することができます。ありがとう！

Answer 1

これは、HTMLとCSSの問題で、私は、

をごplunkrを更新し、それが今のように正常に動作しているが編集した私はchat-toggleのターゲット要素に（下）二つの新しいクラスを追加して、問題がすべてのことでしたchat-toggleのインスタンスがその親要素と同じ幅であり、したがって不規則性を引き起こしていることを確認してください。

.w50{ 
    width:50%; 
} 

.inline{ 
    display:inline-block; 
}