Discussion :

[bzh.floriane]

Bonjour, je commence tout juste à créer un chat.
J'ai besoin de créer un bouton pour que l'utilisateur puisse réduire ses fenêtres de discussion. Cependant chaque conversation a une taille différente (plus il y a de messages, plus la fenêtre est grande), sa largeur ne change pas mais sa hauteur varie.

Lorsque j’exécute mon code, la valeur de la hauteur ne change pas en fonction de la discussion sélectionnée. Cela crée un problème lorsque l'on réduit les fenêtres, la taille n'est pas cohérente.

Voici mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
etatBoucle = true;
 
onRemoveChatWindow(): void {
    if (this.etatBoucle) {
      this.heightWindow = document.getElementById('chat-window').offsetHeight + 'px';
      this.widthWindow = document.getElementById('chat-window').offsetWidth + 'px';
      this.etatBoucle = false;
    }
 
    else {
      document.getElementById('chat-window').style.height = this.heightWindow;
      document.getElementById('chat-window').style.width = this.widthWindow;
      this.etatBoucle = true;
    }
  }

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<div class="chat-window-container">
  <div class="chat-window">
    <div class="panel-container" id="chat-window">
      <div class="panel panel-default">
        <div class="panel-btn">
 
            <button class="panel-btn remove"
                    title="Réduire la fenêtre"
                    (click)="onRemoveChatWindow()">
              <i class="glyphicon glyphicon-minus"></i>
            </button>
 
          </div>
       </div>
</div>
</div>
</div>

J'espère que je suis assez clair dans mes explications ...

Merci d'avance !

[SpaceFrog]

teste en console

Code :

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

console.Log( this.heightWindow )

[bzh.floriane]

J'ai testé, et la valeur change pour la première fenêtre réduite mais après elle reste la même ..

[SpaceFrog]

A vrai dire je ne vois pas de boucle ...

[bzh.floriane]

En modifiant les id dans mes class, la valeur de this.heightWindow change mais il faut que je diminue la fenêtre pour que la hauteur change ..

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
onRemoveChatWindow(): void {
    if (this.etatBoucle) {
      this.heightWindow = document.getElementById('chat-window').offsetHeight + 'px';
      this.widthWindow = document.getElementById('chat-window').offsetWidth + 'px';
      document.getElementById('chat-test').style.height = '38px';
      document.getElementById('chat-test').style.width = '200px';
      document.getElementById('chat-test').style.cssFloat = 'right';
      this.etatBoucle = false;
    }
 
    else {
      document.getElementById('chat-test').style.height = this.heightWindow;
      document.getElementById('chat-test').style.width = this.widthWindow;
      this.etatBoucle = true;
    }
  }

[bzh.floriane]

Merci de t'être intéressé à mon problème. J'ai trouvé la solution en créant une ToggleClass.