Mam podstawową stronę czatu. Pole czatu pośrodku, użytkownicy wciskają Enter podczas wysyłania wiadomości. Po prawej stronie znajduje się wypełniona ajax lista aktualnie zalogowanych użytkowników.

.chat {
  margin-top: 10px;
}

.chat .messages {
  background-color: white;
  border: 1px solid #ccc;
  width: 300px;
  height: 250px;
  padding: 10px;
  resize: both;
  overflow: auto;
  margin: 0 auto;
  font-weight: bold;
}

.present {
  float: right;
  margin-top: -400px;
  margin-right: 50px;
  color: white;  
}

.present .name {
  text-align: center;
}

.name::before {
  content: url("img/blue_dot.png");
  margin-right: 10px;
}
<div class="chat">
  <div class="messages"></div>
  <input type="image" id="imgClick" src="css/img/arrow.png">
  <textarea class="entry" placeholder="Enter or arrow to send&#10;Shift+enter for new line"></textarea>
</div>

<div class="indexBoxes">
  <form action="index.php" method="POST">
    <input type="submit" class="btn btn-info" name="logout" value="Logout">
  </form>
</div>

<div class="present">

</div>

Teraz, odkąd ustawiłem możliwość zmiany rozmiaru okna czatu (resize:both), gdy użytkownik próbuje zmienić jego rozmiar, lista obecnych użytkowników po prawej stronie ekranu <div class="present"></div> również przesuwa się wraz z nim. Jeśli użytkownik zmieni wysokość - przeciągnie ją w dół - lista również się schodzi. Próbowałem temu zapobiec, nadając liście position: absolute, aby usunąć ją z przepływu, a następnie przesunąć ją z powrotem w prawo, ale to nie zadziałało, nadal porusza się z czatem. Próbowałem też nie używać margin: 0 auto do wyśrodkowania pudełka, myśląc, że przyniesie to jakiś efekt, ale to też nie zadziałało.

Wszelkie sugestie byłyby bardzo mile widziane.

Dzięki!

0
Vlad77 3 listopad 2018, 00:41

1 odpowiedź

Najlepsza odpowiedź

Jeśli dobrze rozumiem, próbujesz naprawić „div” z klasą „obecnie” w prawym górnym rogu, prawda? Jeśli dobrze zrozumiałem Twój problem, spróbuj zajrzeć do fragmentu kodu, który przygotowałem dla Twojego problemu.

.chat {
  margin-top: 10px;
}

.chat .messages {
  background-color: white;
  border: 1px solid #ccc;
  width: 300px;
  height: 250px;
  padding: 10px;
  resize: both;
  overflow: auto;
  margin: 0 auto;
  font-weight: bold;
}

.present {
  float: right;

  margin-right: 50px;
  position: absolute; /*added*/
  right: 0; /*added*/
  top: 0; /*added*/
  color: black;
}

.present .name {
  text-align: center;
}

.name::before {
  content: url("img/blue_dot.png");
  margin-right: 10px;
}
<div class="chat">

  <div class="messages"></div>

  <input type="image" id="imgClick" src="css/img/arrow.png">

  <textarea class="entry" placeholder="Enter or arrow to send&#10;Shift+enter for new line"></textarea>

</div>

<div class="indexBoxes">

  <form action="index.php" method="POST">

    <input type="submit" class="btn btn-info" name="logout" value="Logout">

  </form>

</div>

<div class="present">User123<br>User321</div>

Daj mi znać, jeśli potrzebujesz dalszego wyjaśnienia.

1
Ray Soy 3 listopad 2018, 01:24