Comment décaler balises dans boucle *ngFor

Bonjour, je crée un chat avec plusieurs fenêtres de discussion. Lors de la création de mes fenêtres avec la boucle *ngFor, celles-ci se superposent les unes sur les autres. Hors je voudrais qu'elles soient les unes à côté des autres (type Facebook par exemple).
Lorsque je modifie le css en mettant position: relative, cela ne correspond pas non plus à ce que je veux car elles doivent être positionnées par rapport a la fenêtre du navigateur (position: fixed).

Code:

---

1 2 3 4 5 6 7

<div class="chat-window-container"> <div *ngFor="let window of windows; let i=index;"> <chat-window *ngIf = "i<3"> </chat-window> </div> </div>

---

Je voudrais juste décaler chaque fenêtre (chaque 'chat-window') les unes entre elles.

Merci d'avance :)

Bonjour,

le position:fixed doit se situer sur le container et pas sur chaque entité dans ton *ngFor

Code:

---

1 2 3 4 5 6

<div class="chat-window-container"> <div *ngFor="let window of windows; let i=index;"> <chat-window *ngIf = "i<3"> </chat-window> </div> </div>

---

Code:

---

1 2 3 4 5 6

.chat-window-container{ position:fixed; } .chat-window-container div { position:inline-block; }

---

Je ne peux pas affecter la position 'inline-block', cela me met une erreur comme quoi il ne connait pas cette variable.

Voici ce mes codes :

Code:

---

1 2 3 4 5 6 7 8

.chat-window-container { position: fixed; }   .chat-window-container .div { position: relative; }

---

Code:

---

1 2 3 4 5

.chat-window { position: relative; }

---

Je suis allé un peu vite et j'ai écris n'importe quoi désolé.

ça devrait mieux marcher avec le code suivant :

Code:

---

1 2 3 4 5 6 7

.chat-window-container{ position:fixed; } .chat-window-container div { position:relative; display:inline-block; }

---

Super merci beaucoup :) cela fonctionne !!