Custom cell renderer in AG Grid doesn't take up all the space in the cell?

Question

I have an ag grid table in an Angular project and I have created a custom cell renderer component for one of the fields. For my purposes, I need to access the scrollWidth property of the span but it is always coming up as zero whereas the scrollWidth of the div corresponding to the cell has some positive value.

But the question I ask is how to get the cell renderer span to occupy all of the space of the cell?

Let's say this is my cell renderer. Example taken from AG Grid documentation. https://www.ag-grid.com/angular-data-grid/component-cell-renderer/#complex-cell-renderer-example

I have set the background color as red but it does color the entire cell red.

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { ICellRendererParams } from 'ag-grid-community';

@Component({
  selector: 'day-component',
  template: `<span style="background-color: red;"
    ><img *ngFor="let number of value" [src]="rendererImage"
  /></span>`,
})
export class DaysFrostRenderer implements ICellRendererAngularComp {
  params!: ICellRendererParams & { rendererImage: string };
  rendererImage!: string;
  value!: any[];

  agInit(params: ICellRendererParams & { rendererImage: string }): void {
    this.params = params;
    this.updateImage();
  }

  updateImage() {
    this.rendererImage = `https://www.ag-grid.com/example-assets/weather/${this.params.rendererImage}`;
    this.value = new Array(this.params.value).fill(0);
  }

  refresh(params: ICellRendererParams & { rendererImage: string }) {
    this.params = params;
    this.updateImage();
    return true;
  }
}

Answer 1

Change span to div. That solves the problem of scrollWidth for me.