0
240
VistasApexChart no se muestra correctamente en el contenedor de columnas
Estoy tratando de representar mi ApexChart en un contenedor con esta propiedad CSS: columns: 2; Cuando elimino esa propiedad, se renderiza como se supone:
Pero con el CSS que da esto sucede:
No tengo idea de por qué sucede esto... Como ya probé mucho, estoy muy seguro de que la línea dada de CSS es la fuente del error y no otra cosa.
Creé un violín que recrea el error: https://jsfiddle.net/levi_hrb/9dzrxv73/12/
Sé que sería posible ordenar los contenedores con JavaScript en dos columnas de mampostería. El problema es que el contenido y la altura a menudo cambian, por lo que sería mejor si hubiera una solución CSS pura.
Me encantaría cualquier ayuda, ¡muchas gracias!
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
El diseño anterior funciona bien con grid .
.widget-container { display: grid; grid-template-columns: repeat(2, 1fr); .widget-box { display: block; break-inside: avoid; page-break-inside: avoid; padding: 4px; } } <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <div class="col-12 widget-container"> <div class="widget-box"> <div class="apexchart" id="apexchart" style="min-height: 315px;"></div> </div> <div class="widget-box"> <div class="apexchart" id="apexchart2" style="min-height: 315px;"></div> </div> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta