0
234
ViewsApexChart not displaying properly in cloumns container
I'm trying to render my ApexChart in a container with this CSS property: columns: 2;
When I remove that property, it gets renders as assumed:
But with the giving CSS this happens:
I have no idea why this is happening... As I already tried a lot, I'm very sure, that the given line of CSS is the source of the error and not anything else.
I created a fiddle which recreates the bug: https://jsfiddle.net/levi_hrb/9dzrxv73/12/
I know that it would be possible to order the containers with JavaScript into two masonry columns. The problem is, that the content and height is often changing, so it would be the best if there were a pure CSS solution.
I would be very happy for any help, thank you very much!
·
Juan Pablo Isaza
1 answers
Answer question0
The above design is working well with 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
Report
Answer question