1

Tengo un modal creado con la librería Bootstrap en el que tengo varias listas que se rellenan al hacer una búsqueda mediante Ajax, con un tamaño fijo y la propiedad overflow-y: scroll, para poder tener muchos elementos sin hacer una página enorme.

El problema está en que si selecciono un elemento de abajo de la lista, la página entera se desplaza hasta la posición donde estaría ese elemento sin la propiedad overflow-y: scroll.

He probado a aplicarle la propiedad overflow: revert para que se mantenga estática, pero no me sirve porque en pantallas pequeñas, al tener dichas listas un tamaño fijo, no se puede desplazar para ver todo.

¿Alguna idea de qué puedo hacer?

Comparto el código con todo ya incluido y simplificado a 1 lista y espacio en blanco asignado para otros elementos para haceros una idea más o menos.

function selectElement(e) {
  ($(e).attr("seleccionado") == 0) ? $(e).attr("seleccionado", "1").parent().appendTo("#listaSeleccionados").children("label").removeClass("btn-outline-success").addClass("btn-success"): $(e).attr("seleccionado", "0").parent().prependTo("#lista").children("label").removeClass("btn-success").addClass("btn-outline-success");
}

$(document).ready(function() {
  $("#modalTest").on("show.bs.modal", function() {
    setTimeout(() => {
      $("#lista").html(`<li id="seleccionarTodos" class="mt-1"><button type="button" class="btn btn-outline-primary rounded-pill w-100" id="btnSeleccionarTodos" autocomplete="off">Seleccionar todos</button></li>`);
      for (i = 1; i <= 1000; i++) {
        $("#lista").append(`<li id="elemento` + i + `" class="mt-1">
                                        <input type="checkbox" id="chkElemento` + i + `" seleccionado="0" onchange="selectElement(this)" class="btn-check"  autocomplete="off">
                                        <label class="btn btn-outline-success w-100 check-lista" for="chkElemento` + i + `">
                                            <div class="text-start">Elemento ` + i + `</div>
                                        </label>
                                    </li>`);
      }
    }, 100);
  });
});
*::-webkit-scrollbar {
  max-width: 10px;
  max-height: 10px;
}

*::-webkit-scrollbar-track {
  border-radius: 0px 15px 15px 0px;
  box-shadow: inset 0 0 6px rgba(77, 0, 0, 0.192);
}

*::-webkit-scrollbar-thumb {
  max-width: 10px;
  border-radius: 0px 15px 15px 0px;
  background-color: rgba(204, 78, 78, 0.808);
  outline: 1px solid rgb(133, 84, 84);
}

.modal-content {
  border-radius: 20px;
}

.check-lista {
  border-radius: 15px;
  transition: all 0.2s ease;
  z-index: 1;
}

.check-lista:hover {
  transform: scale(1.02, 1.03);
  z-index: 10;
}

#lista,
#listaSeleccionados {
  min-height: 300px;
  max-height: 300px;
  overflow-y: scroll;
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

</head>

<body>
  <button type="button" class="position-absolute top-50 end-50 btn btn-primary btn-lg rounded-pill" data-bs-toggle="modal" data-bs-target="#modalTest">
            Abrir Modal
        </button>

  <div class="modal fade" id="modalTest" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="Modal Test" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="titulo">Modal de prueba</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row row-cols-sm-1 row-cols-md-3">
            <div id="buscarEmpleado" class="col">
              <div class="row row-cols-1 gy-1">
                <div class="col">
                  <div class="input-group">
                    <input type="text" id="buscador" class="form-control" placeholder="Buscar" aria-label="Buscador" aria-describedby="Buscar">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                  </div>
                </div>
              </div>
            </div>

            <div class="col px-2">
              <ul id="lista" class="list-unstyled p-1 border rounded-4 text-center">
                <li id="seleccionarTodos" class="mt-1"><button type="button" class="btn btn-outline-primary rounded-pill w-100" id="btnSeleccionarTodos" autocomplete="off">Seleccionar todos</button></li>
              </ul>
            </div>
            <div class="col px-2">
              <ul id="listaSeleccionados" class="list-unstyled p-1 border rounded-4 text-center oculto">
                <li id="deselTodos" class="mt-1"><button type="button" class="btn btn-primary rounded-pill w-100" id="btnDeseleccionarTodos" autocomplete="off">Deseleccionar todos</button></li>
              </ul>
            </div>
          </div>
          <hr>
          <div style="min-height:300px">
            <h4>Otras listas</h4>
          </div>
          <hr>
          <div style="min-height:100px">
            <h4>Filtros</h4>
          </div>
        </div>
        <div class="modal-footer text-center d-block">
          <button type="button" class="btn btn-danger rounded-pill" data-bs-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-success rounded-pill">Guardar</button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.