Discussion :

[bzh.floriane]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[pterrat]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.chat-window-container{
    position:fixed;
}
.chat-window-container div {
position:inline-block;
}

[bzh.floriane]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.chat-window-container {
    position: fixed;
}
 
.chat-window-container .div {
    position: relative;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
 
.chat-window {
    position: relative;
}

[pterrat]

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

ça devrait mieux marcher avec le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.chat-window-container{
    position:fixed;
}
.chat-window-container div {
position:relative;
display:inline-block;
}

[bzh.floriane]

Super merci beaucoup cela fonctionne !!