Ayuda con Angular

T

Hola, estoy haciendo un pequeño proyecto en Angular. Hace muy poco que he empezado a aprenderlo y me he quedado atrancado, no consigo avanzar con esto, llevo días mirando en internet y no encuentro ninguna solución. A ver si pudierais ayudarme.

En un form quiero insertar unos cuantos checkbox de forma dinámica. Lo hago así:

<div formArrayName="categorias" *ngFor="let categoria of categoriasFormArray.controls; let i = index">
<mat-checkbox [formControlName]="i">{{categoriasData.name}}</mat-checkbox>
</div>


Los checkbox me aparecen uno debajo de otro, ¿cómo podría hacerlo para tener 2 o 3 columnas y que se vayan rellenando automaticamente, independientemente del número que haya? Algo así:




Muchas gracias
Un saludo

RA_MeSiAs

Diria que tu problema no es de angular, sino de CSS. Podrias probar a que el <input> ocupe un 33%, teoricamente deberia de salir como quieres.

1 respuesta
M

Creo que deberías generar una lista como html, y luego adjudicarle una clase a cualquier elemento de lista cada "x items".

Por ejemplo:

<ul>
<li></li>
<li></li>
<li class="corta"></li>
<li></li>
<li></li>
</ul>

css:

ul li {float:left}
.corta{clear:both}

resultado:
1º fila: 2items
2º fila: 3 items...

genera tantos como quieras pero no te olvides de poner un height: auto al ul para que reconozca la altura. Tendrás que añadir esto:

<ul>
<li></li>
<li></li>
<li class="corta"></li>
<li></li>
<li ></li>
</ul>
<div class="clear_fix"></div>

css:
ul{height:auto}
.clear_fix{clear:both; line-height:1px;}

Para este caso, es más que recomendable poner un width a los elementos de li, es más engorroso de cara al responsive, pero te quitas de jaleos en escritorio.

También puedes crear columnas con capas flotadas con un width en % y cargas dentro los checkbox en lista que necesites.

En html5, también existe display:flex, para alinear "hijos" dentro de una capa madre que contiene esta propiedad de flex.

1 respuesta
T

#2 No me funciona de esta manera :(

#3 Lo he probado y me funciona, como tu dices me falla un poco con el responsive, pero bueno, no está mal. No sé si habrá otra manera de hacerlo, pero esto sirve perfectamente. Ha quedado así:

Muchas gracias por la ayuda.

1 1 respuesta
M

#4 Ahora para los mediaqueries, tendrás que seguir toqueteando las clases que has creado.

Pero bueno es fácil. ^^

JuAn4k4

Tío ni puto caso a lo de arriba, aprende flexbox y css grid. LEE primero, luego aplica.

https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

5 2 respuestas
M

#6 Para la chorrada que tiene que hacer, meterte en un embolao de flex.. la auténtica salud.

No sé que hay más fácil que flotar elementos y cortar donde quieras. Incluso ya tienes el responsive hecho, porque al estar flotado todo solo tienes que darle a los elementos de lista un 100% en móvil.

Flex es un coñacete, tardas más si no tienes práctica.

2 respuestas
Tuskus

Pero si con flex eso lo haces en dos segundos, que dices de embolado xD.

8
RedSpirit

De hecho hacerlo mal cuesta mucho más. Y si tienes que dedicarle 30 minutos a leerte lo básico de Flex pues una herramienta más que ganas para futuros casos de uso.

JuAn4k4

#7 Si no quieres aprender no aprendas, pero no sugieras a otros no hacerlo.

T

#6 Muchas gracias, me ha parecido más fácil con lo que me has pasado y más rápido.

1
12 comentarios moderados

Usuarios habituales