Intento usar Angular-gridster2 y tengo un problema: cuando agrego el primer elemento a la cuadrícula, este elemento ocupa todo el espacio de la cuadrícula. Cómo se ve en los Elementos en el navegador.
<gridster-item _ngcontent-hrw-c99="" ng-reflect-item="[object Object]" class="ng-star-inserted" style="z-index: 1; display: block; transform: translate3d(0px, 0px, 0px); width: 1900px; height: 586px; margin-bottom: 10px; margin-right: 10px;">Tan pronto como actualizo la página, la cuadrícula se vuelve visible, todas las columnas y filas aparecen y comienza a funcionar correctamente; tome solo 1 fila y 1 columna, cómo se configuró para cada elemento.
<gridster-item _ngcontent-jdx-c99="" ng-reflect-item="[object Object]" style="z-index: 1; display: block; transform: translate3d(0px, 0px, 0px); width: 200px; height: 200px;">Aquí está mi configuración de cuadrícula:
this.options = { gridType: GridType.Fixed, fixedColWidth: 200, fixedRowHeight: 200, minCols: 5, maxCols: 6, minRows: 5, maxRows: 6, draggable: { enabled: true }, displayGrid: 'always', swap: true, };También es extraño que hasta que agregue el primer elemento, la cuadrícula no se muestre (incluso si displayGrid: 'siempre').
Parece que la cuadrícula "recuerda" la configuración solo después de agregar el primer elemento y actualizar la página.
Traté de seguir la configuración en la página del manual, pero tampoco solucionó el problema https://tiberiuzuld.github.io/angular-gridster2/gridSizes . Cuando coloco minCols y minRows allí, funciona correctamente en el manual (pero no en mi código). Para este caso mi configuración fue:
minCols: 4, maxCols: 5, minRows: 4, maxRows: 5, maxItemCols: 1, maxItemRows: 1,¿Alguien podría decirme, por favor, qué estoy haciendo mal? ¡Gracias de antemano!
Creo que podría arreglarlo yo solo. Proporcionaré la respuesta en caso de que alguien más tenga el mismo problema.
Olvidé que también tengo un conmutador para cambiar entre los diferentes estados de la cuadrícula (en mi caso, para cambiar entre verdadero y falso para this.optiosn.draggable.enabled). Antes proporcioné la cantidad de columnas y filas solo para un estado. Tan pronto como lo agregué para ambos estados, ¡el problema se resolvió!
Estoy hablando de estas líneas en this.options:
minCols: 4, maxCols: 5, minRows: 4, maxRows: 5,