Canvas force grid cell to be expanded infinitelly - html

Question

ts:
templateStyle = {
display: 'grid',
'grid-template-columns': 'calc(25%-10px) calc(25%-10px) calc(25%-10px) calc(25%-10px)',
'grid-template-rows': '150px auto auto',
'grid-gap': '10px',
border: '1px solid #2196F3',
padding: '10px'
}
widgets = [
{ rowStart: 1, rowEnd: 2, colStart: 1, colEnd: 2, ... },
{ rowStart: 1, rowEnd: 2, colStart: 2, colEnd: 3, ... },
...
{ rowStart: 2, rowEnd: 3, colStart: 1, colEnd: 2, ... },
...
];
getStyle(widget): object {
return {
position: 'relative',
'grid-row-start': widget.rowStart,
'grid-row-end': widget.rowEnd,
'grid-column-start': widget.colStart,
'grid-column-end': widget.colEnd,
'text-align': 'center',
'vertical-align': 'middle',
'min-height': card.height + 'px'
};
}
html
<div [ngStyle]="templateStyle">
<div *ngFor="let widget of widgets" [ngStyle]="getStyle(widget)">
<button (click)="addChart()">Add</button>
<div *ngIf="If chart added by above button action"
style="width: 100%; height: 100%"> // widht/height 100% to give all space of the parent
<canvas style="width: 200px; height: 200px;"
chartType="pie"
[data]="[200, 100]"
[labels]="['A', 'B']"
baseChart>
</canvas>
</div>
</div>
</div>
Eh, the line style="width: 200px; height: 200px; is ignored by the canvas and this will force the grid cell to grow infinitelly outside the grid. I'm thinking that this happening because I declared grid-columns using percentages. If I remove the canvas parent style (width: 100%, height: 100%), the cell will grow how much space is availaible in the grid.
So I need to calculate column width somehow and give absolute values for grid, and not using percentages as: grid-template-columns': 'calc(25%-10px) calc(25%-10px) calc(25%-10px) calc(25%-10px). I also tried to use fr, but have same result. For both cases, I tried to remove canvas and use just a simple container with a background, this will work perfectly, due of this, my opinion is that the canvas force the cell (parent) to be resized each time.
I'm really thinking to use d3 charts instead of chartjs if I can't find a solution for this.

Answer 1

try this
templateStyle = {
....
'grid-template-columns': '1fr 1fr 1fr 1fr',
'grid-gap': '10px',
with 1fr for each column space will be evenly divided between 4 columns.