JS scrollIntoView () не функционирует с divs со свойством float

Я реализую чат между двумя пользователями, все функциональное, но я encotré с проблемой, послав сообщение, предполагается, что автоматически нужно показывать это сообщение. Вещь, которую он не делает. Я это пробую с:

scrollIntoView (false)

Но я понял, что он, потому что у divs есть свойство float, один, выровненный в левую сторону и другой в правую сторону. Сняв свойство в обоих divs, посланное сообщение появляется желанной формы.

Здесь код:

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";

}

Что мог бы делать в этом случае, ждало и смогите помогать мне. Привет!.

1
задан 10.11.2019, 00:33
1 ответ

Проблема состоит в том, что ты div#salida не имеет высоко, высоты 0

Это перемещает с контейнерами, у которых есть плавающие элементы, tenes, что использовать технику clearfix

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

0
ответ дан 01.12.2019, 12:10
  • 1
    Привет, спасибо за отвечание. Я поместил ему height 100px и продолжи перемещать то же самое. – Alexeni Cruz 09.11.2019, 23:45
  • 2
    это была одна из проблем. Другая тема состоит в том, что тот, кто имеет установленную высоту и делает scroll - form-container. Tenes, который нужно делать scroll form и не #salida. Например let form = document.getElementById('form-container');, чтобы иметь form и после посылая сообщение, ты делаешь следующее: form.scrollTo(0,form.scrollHeight);. Ты делаешь scroll до X положения, будучи eque это положение вычисляешь ее как полная высота твоего form, которая, если queres ты обрезал hardcodear 300, так как это установленная высота, которую ты поместил ему из-за css. – lucasgonzalez 10.11.2019, 00:52
  • 3
    Большое спасибо!, это было решение – Alexeni Cruz 10.11.2019, 01:46

Теги

Похожие вопросы