Grid Item on gridster2 doesn't show

Question

I'm using gridster2 to create a table plan for a reservation project. I've created a sample dashboard but when I run the project it only shows the grid not the item. when I tried to inspect element the item/widgets appeared. What could be wrong?

Component code:

this.options = {
    gridType: GridType.Fit,
    fixedRowHeight: 10,
    maxCols: 50,
    maxRows: 50,
    pushItems: false,
    draggable: {
        enabled: false
    },
    resizable: {
        enabled: false
    }



    this.dashboard = [{
            cols: 2,
            rows: 1,
            y: 0,
            x: 0,
            label: 'Table1 1'
        },
        {
            cols: 2,
            rows: 2,
            y: 0,
            x: 2,
            label: 'Table 2'
        }
    ];
};

Html Code:

<div class="col-lg-11">
   <div class="card">
      <div class="card-body">
         <gridster class="gridsterfit" [options]="options">
            <gridster-item  [item]="item" *ngFor="let item of dashboard">
            <div class="button-holder">
               <label *ngIf="!item.hasContent">{{item.label}}</label>
            </div>
            </gridster-item>
         </gridster>
      </div>
   </div>
</div>

Answer 1

I had a similar problem. It turned out to be black font on a black background.