item is displaying over to another item

[belotesagar]

hello, I am using "angular-gridster2": "^15.0.0", in my angular project. here I am getting one issue on the server when we check the last item is displaying over to other items. locally it is working fine.

my Persoonlijke Aantekeningen widget is showing on top of other widgets that's why my first 4 widgets get hidden.

please see attached screenshot and let me know what going wrong with my code.

HTML code:

                    <gridster-item [item]="widgets['algameneInformatie']">
                        <div i18n class="widget-header">
                            Algemene Informatie
                        </div>
                        <div class="widget-body" *ngIf="hasReadSupplier">
                            <table class="table table-striped table-condensed">
                                <tr *ngFor="let algemeneInfo of algameneInformatieWidget">
                                    <td title="{{algemeneInfo.description}}">{{algemeneInfo.label}}</td>
                                    <td class="text-right">{{algemeneInfo.value}}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="text-center widget-body-note" *ngIf="!hasReadSupplier">
                            <h4 i18n>Deze informatie is niet beschikbaar. U heeft niet de juiste rechten.</h4>
                        </div>
                    </gridster-item>

                    <gridster-item [item]="widgets['risicoManagement']" *ngIf="(canShowRisicoManagement)">
                        <div i18n class="widget-header">
                            Risico management
                        </div>
                        <div class="widget-body">
                            <table class="table table-striped table-condensed">
                                <tr *ngFor="let performanceInfo of risicoManagementWidget">
                                    <td title="{{performanceInfo.description}}">{{performanceInfo.label}}</td>
                                    <td class="text-right">{{performanceInfo.value}}</td>
                                </tr>
                            </table>
                        </div>
                    </gridster-item>

                    <gridster-item [item]="widgets['aantalActies']">
                        <div i18n class="widget-header">
                            Acties (totaal / openstaand)
                        </div>
                        <div class="widget-body" *ngIf="hasReadSupplier">
                            <table class="table table-striped table-condensed">
                                <tr *ngFor="let aantalActieInfo of aantalActiesWidget">
                                    <td title="{{aantalActieInfo.description}}">{{aantalActieInfo.label}}</td>
                                    <td class="text-right">{{aantalActieInfo.value}}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="text-center widget-body-note" *ngIf="!hasReadSupplier">
                            <h4 i18n>Deze informatie is niet beschikbaar. U heeft niet de juiste rechten.</h4>
                        </div>
                    </gridster-item>

                    <gridster-item *ngIf="showPersonalNote | async" [item]="widgets['persoonlijkeAantekeningen']"
                        class="gridster-item-note">
                        <div i18n class="widget-header">
                            Persoonlijke Aantekeningen
                        </div>
                        <div class="widget-body-note">
                            <div class="row ">
                                <div class="col-md-12">
                                    <textarea class="form-control" rows="15" formControlName="note"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="widget-footer-note">
                            <div class="row">
                                <div class="col-md-12 text-right pb-2">
                                    <button i18n type="button" id="btnToevoegen" name="btnToevoegen"
                                        [disabled]="supplierInfoForm.pristine || supplierInfoForm.invalid || isSaved"
                                        class="btn btn-primary" i18n-title title="Opslaan"
                                        (click)="onToevoegenClick()">
                                        Opslaan
                                    </button>
                                    <br />
                                </div>
                            </div>
                        </div>
                    </gridster-item>
                </gridster>
            </div>
        </div>
    </div>

Typescript code(required for above template) :

    gridConfig: GridsterConfig = {
itemChangeCallback: this.itemChange.bind(this),
minCols: 12,
maxCols: 12,
minRows: 3,
draggable: {
  enabled: true,
  ignoreContent: true,
  dragHandleClass: 'widget-header'
},
resizable: {
  enabled: true,
},

displayGrid: 'onDrag&Resize'

};

widgets: { [key: string]: GridsterItem } = {
'algameneInformatie': { rows: 3, cols: 3, x: 0, y: 0 },
'performance': { rows: 3, cols: 3, x: 3, y: 0 },
'risicoManagement': { rows: 3, cols: 3, x: 6, y: 0 },
'aantalActies': { rows: 3, cols: 3, x: 9, y: 0 },
'persoonlijkeAantekeningen': { rows: 5, cols: 12, x: 0, y: 0 }
};