1

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!.

1 respuesta 1

0

El problema es que tu div#salida no tiene alto, el alto es 0

Esto pasa con los contenedores que tienen elementos flotantes, tenes que usar la tecnica de clearfix

https://www.w3schools.com/howto/howto_css_clearfix.asp

3
  • Hola, gracias por contestar. Le puse un height de 100px y sigue pasando lo mismo. Commented el 9 nov. 2019 a las 21:45
  • ese era uno de los problemas. El otro tema es que quien tiene el alto fijo y esta haciendo scroll es el form-container. Tenes que hacerle el scroll al form y no a #salida. Por ejemplo let form = document.getElementById('form-container'); para tener el form y luego de enviar el mensaje haces lo siguiente: form.scrollTo(0,form.scrollHeight);. Haces scroll hasta X posicion, siendo eque esa posicion la calculas como el alto total de tu form, que si queres podes hardcodear los 300, ya que ese es el alto fijo que le pusiste por css. Commented el 9 nov. 2019 a las 22:52
  • Muchas gracias!, esa era la solucion Commented el 9 nov. 2019 a las 23:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.