Angular-gridster2: Gridster height is not set correctly.

[robinabganpat]

I'm using a basic configuration for Gridster.

My html template:
<gridster [options]="options"> <gridster-item [item]="item" *ngFor="let item of dashboard"> <!-- your content here --> Hello world </gridster-item> </gridster>

My ts file:
`
import { GridsterConfig, GridsterItem, GridType, DisplayGrid } from 'angular-gridster2';
import { Component, Input } from '@angular/core';
import { ContentPlacement } from '../../api-clients/portal/generated.portal';

@Component({
selector: 'dashboard-gridster',
templateUrl: './dashboard-gridster.component.html',
styleUrls: ['./dashboard-gridster.component.css']
})
export class DashboardGridsterComponent {

@Input() inputContentPlacements: ContentPlacement[];
options: GridsterConfig;
dashboard: Array<GridsterItem>;

static itemChange(item, itemComponent) {
    console.info('itemChanged', item, itemComponent);
}

static itemResize(item, itemComponent) {
    console.info('itemResized', item, itemComponent);
}

ngOnInit() {
    this.options = {
        itemChangeCallback: DashboardGridsterComponent.itemChange,
        itemResizeCallback: DashboardGridsterComponent.itemResize,
    };

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

changedOptions() {
    this.options.api.optionsChanged();
}

removeItem(item) {
    this.dashboard.splice(this.dashboard.indexOf(item), 1);
}

addItem() {
    this.dashboard.push(<GridsterItem>{});
}

}
`

The result:

As you can see the height is 0. The only thing that is visual is caused by the padding of the Gridster component.
The parent component, the Gridster component is in, has a height of 100%.

Does anyone know how I can fix it so it shows like a normal grid?

[CollinGraf314]

This could probably be fixed with CSS. If your grid is going to be a set size of your window you can use:

gridster {
        height: calc(100vh - 600px); // example if you were to say need 600px of space above the grid
        width: 100vw;
}

Another option would be to set the grid size to the size of the child components

this.options = {
        setGridSize: true
}