Estoy realizando un chat entre dos usuarios, todo esta funcional, pero me encotré con un problema, al enviar un mensaje, se supone que automáticamente se debe mostrar ese mensaje. Cosa que no hace. Lo intento con:
scrollIntoView(false)
Pero me di cuenta que es porque los divs tienen la propiedad float, uno alineado a la izquierda y el otro a la derecha. Al quitar la propiedad en ambos divs, el mensaje enviado se muestra de la forma deseada.
Aquí el código:
HTML
<button class="open-button" onclick="openForm()">Asistencia</button>
<div class="chat-popup" id="chat-popup">
<input type="text" value="<?php echo $admin; ?>" style="display:none;" id="admin">
<div class="form-container" id="form-container">
<h3 class="lead">Asistencia</h3>
<input type="text" style="display:none;" class="form-control" id="usr" placeholder="Mensaje"
value="<?php echo $user; ?>">
<input type="text" id="imagen" style="display:none;" value="<?php echo $imagen; ?>">
<div class="" id="message">
<div class="card-body p-3" id="kk">
<div class="" id="salida">
<div class="rounded w-75 z-depth-0 mb-1" style="background-color:#e0e0e0; float:left;">
<p style="font-size:13px;" class="card-text black-text">
<strong>Tú: </strong> Hola!
</p>
</div>
<div class="bg-primary rounded w-75 z-depth-0 mb-1" style="float:right;">
<p style="font-size:13px;" class="card-text text-white">
<strong>Administrador: </strong> Como estas?
</p>
</div>
</div>
</div>
</div>
</div>
<input onkeyup="mensajeChange()" type="text" class="form-control" id="mensaje" placeholder="Mensaje" required>
<input type="button" class="btn btn-success btn-sm btn-block" id="enviar" value="Enviar">
<input type="button" class="btn btn-danger btn-sm btn-block" id="cerrar" value="Cerrar" onclick="closeForm();">
</div>
CSS
.open-button {
background-color: #555;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 0px;
right: 0px;
width: 280px;
}
/* The popup chat - hidden by default */
#chat-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
/* Add styles to the form container */
#form-container {
max-width: 300px;
max-height: 300px;
overflow: auto;
padding: 10px;
background-color: white;
}
#enviar{
margin: 0;
}
#cerrar{
margin: 0;
}
JS
let mensaje = document.getElementById('mensaje');
let usuario = document.getElementById('usr');
let imagen = document.getElementById('imagen');
let enviar = document.getElementById('enviar');
let salida = document.getElementById('salida');
enviar.addEventListener('click', function() {
//Enviando Datos al Servidor
salida.innerHTML +=
`
<div class="rounded w-75 z-depth-0 mb-1" style="background-color:#e0e0e0; float:left;">
<p style="font-size:13px;" class="card-text black-text">
<strong>Tú: </strong> ${mensaje.value}
</p>
</div>
`;
salida.scrollIntoView(false); //Mostrar Ultimos Mensajes en Pantalla de forma automatica });
function openForm() {
document.getElementById("chat-popup").style.display = "block";
}
function closeForm() {
document.getElementById("chat-popup").style.display = "none";
}
Que podría hacer en este caso, espero y me puedan ayudar. Saludos!.