1

Tengo esta vista, generada con Spring-boot y Thymeleaf y usando Bootstrap 4 en la que la cantidad de checkbox es indefinida por que vienen de la base de datos:

Ventana modal de bootstrap

La ventana no es redimensionable por el usuario ni planeo que lo sea. No se ve siempre, sólo cuando pulso un botón de la web, por lo que hace como de "popup" Necesitaría que los checkbox, que pueden ser 4 o 25, se distribuyan en dos o más columnas, para no ocupar tanto espacio vertical y dejar el espacio de la derecha en blanco. ¿Puedo hacerlo al mismo tiempo que genero los checkbox o habría que hacerlo una vez ya todos han sido generados?

Por ejemplo: Si uso dos columnas, en lugar de llenar una y luego la otra, se podría ir asignando un check a una columna cada vez, para no tener que saber cuántos va a haber en total.

Éste es el código:

<div class="modal fade text-left" th:id="|modalPuestoLibre-${puesto.id}|" tabindex="-1" role="dialog" aria-labelledby="modalPuestoLibreLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-bold" id="modalPuestoLibreLabel" th:text="${puesto.nombre}"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">Modifica el nombre del puesto:</label>
                        <input type="text" class="form-control" id="recipient-name" th:placeholder="${puesto.nombre}">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">Nueva descripción del puesto:</label>
                        <textarea class="form-control" id="message-text" th:text="${puesto.descripcion}"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">Reasigna las habilidades necesarias:</label>
                        <th:block class="mr-2" th:each="habilidad : ${habilidades}">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" name="idsHabilidadesRequire[]" th:value="${habilidad.id}" th:id="|id-${habilidad.id}-habilidad|"/>
                                <label th:for="|id-${habilidad.id}-habilidad|" class="custom-control-label" th:text="${habilidad.nombre}"/>
                            </div>
                        </th:block>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <div>
                    <button type="button" class="btn btn-sm btn-outline-secondary border-0" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-sm btn-outline-info border-0">Guardar cambios</button>
                </div>
        
            </div>
        </div>
    </div>
</div>

Siguiendo el consego de @Maidagan y agregando <div class="col-6>" o añadiendo .col-6 a cada uno de los div que se generan englobados en un row, sí que se muestra la división en dos columnas, pero el segundo elemento se coloca en la primera columna, en lugar de en la segunda. He probado con diferentes disposiciones del div, pero el resultado es el mismo:

<th:block class="row" th:each="habilidad : ${habilidades}">
    <div class="col-6">
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" name="idsHabilidadesRequire[]" th:value="${habilidad.id}" th:id="|id-${habilidad.id}-habilidad|"/>
            <label th:for="|id-${habilidad.id}-habilidad|" class="custom-control-label" th:text="${habilidad.nombre}"/>
        </div>
    </div>
</th:block>

Y esto es lo que pasa: introducir la descripción de la imagen aquí

Quitando los márgenes no se me soluciona, ya que, aparentemente, no es un problema de espacio.


Finalmente, lo he solucionado con ayuda de @Maidagan. He sustituido la clase .form-group del contenedor del input y el label por row. La clase anterior entraba de alguna forma en conflicto con el grid de Bootstrap

Éste sería el formulario resultante:

<form>
    <div class="form-group">
        <label for="recipient-name" class="col-form-label">Modifica el nombre del puesto:</label>
        <input type="text" class="form-control" id="recipient-name" th:placeholder="${puesto.nombre}">
    </div>
    <div class="form-group">
        <label for="message-text" class="col-form-label">Nueva descripción del puesto:</label>
        <textarea class="form-control" id="message-text" th:text="${puesto.descripcion}"></textarea>
    </div>
    <div class="row">
        <label for="message-text" class="col-form-label">Reasigna las habilidades necesarias:</label>
        <th:block class="" th:each="habilidad : ${habilidades}">
            <div class="col-6">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" name="idsHabilidadesRequire[]" th:value="${habilidad.id}" th:id="|id-${habilidad.id}-habilidad|"/>
                    <label th:for="|id-${habilidad.id}-habilidad|" class="custom-control-label" th:text="${habilidad.nombre}"/>
                </div>
            </div>
        </th:block>
    </div>
</form>

Y así se vería, que es exactamente lo que quería: introducir la descripción de la imagen aquí

4
  • Buen día, ¿Qué es lo que has intentado para hacerlo? Commented el 28 abr. 2022 a las 8:16
  • Por ahora estoy pensando en las opciones que tengo. Acabo de intentar lo que me ha comentado el compañero @Maidagan de añadirle a un contenedor superior (y al mismo de .custom-control .custom-checkbox) .col-6 y no me ha funcionado del todo. Quiero evitar utilizar jQuery o JavaScript.
    – Chapa
    Commented el 28 abr. 2022 a las 8:32
  • Solo recuerda que es necesario mostrar un esfuerzo por resolver tu problema, de otra forma es muy probable que la pregunta termine cerrada y/o con votos negativos. Por eso siempre es necesario que agregues el código que has intentado utilizar Commented el 28 abr. 2022 a las 8:40
  • @HeytalePazguato apenas he tenido tiempo de elaborar la respuesta para el compañero que está tratando de ayudarme. No entiendo esto como que me esté haciendo "la tarea" o "el proyecto". Literalmente, no se me ha ocurrido, ni buscando información, ninguna forma de solucionar mi necesidad y he venido al sitio en el que se responden este tipo de dudas. No creo haberlo hecho tan mal, ¿no? Gracias por tus consejos.
    – Chapa
    Commented el 28 abr. 2022 a las 9:00

1 respuesta 1

1

Lo que puedes hacer, en vez de crear las dos columnas y que una se rellene cuando la otra se haya rellenado, es crear dos columnas pero que se vallan llendando simultaneamente, es decir que el primer valor se meta en la primera columna, el segundo valor en la segunda columna, el tercer valor en la primera...

Para ello puedes utilizar las clases col que te ofrece Bootstrap, de la siguiente manera:

<th:block class="mr-2" th:each="habilidad : ${habilidades}">
  <div class="col-6">
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" name="idsHabilidadesRequire[]" th:value="${habilidad.id}" th:id="|id-${habilidad.id}-habilidad|"/>
        <label th:for="|id-${habilidad.id}-habilidad|" class="custom-control-label" th:text="${habilidad.nombre}"/>
     </div>
  </div>
 </th:block>
12
  • Muchas gracias por tu respuesta! Pues tras probarlo, tanto añadiendo .col-6 a un div "superior" como al mismo div que engloba el input y el label de cada check, parece que sí me hace las columnas, pero me los pone todos en la izquierda, como puedes ver aquí: imgur.com/a/BuJa0HY
    – Chapa
    Commented el 28 abr. 2022 a las 8:37
  • 1
    @Chapa eso será por el márgen que tienes asignado, seguramente sea por el class="mr-2" que tiene la clase padre de este, prueba a quitarselo, sino también puedes utilizar el inspeccionador que te ofrecen los navegadores. Puedes acceder pulsando F12 en el navegador
    – Maida
    Commented el 28 abr. 2022 a las 8:45
  • 1
    Se me ha pasado una cosa, y es que le tienes que añadir la clase row al div padre de tus columnas, en este caso al mismo que tiene la clase mr-2, creo que con eso te debería de funcionar
    – Maida
    Commented el 28 abr. 2022 a las 9:06
  • 1
    Solo quiero aclarar a ambos que los comentarios no son para molestar a nadie, solo son con el fin de mejorar tanto la pregunta como la respuesta, espero que pronto puedan resolver el problema. Gracias a ambos por su esfuerzo en cooperar al crecimiento de la comunidad. Que tengan un buen día Commented el 28 abr. 2022 a las 9:13
  • 1
    Una pregunta, estás pudiendo utilizar correctamente bootstrap? Ya que viendo la imágen te da un aviso diciendo que no se ha podido cargar el contenido. Asegurate de eso, por otra parte, prueba a ver en el inspector todos los márgenes cuando pones row, y prueba quitando los margenes desde el inspector, a ver si de esa manera funciona.
    – Maida
    Commented el 28 abr. 2022 a las 9:32

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.