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:
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">×</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>
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>