Grid items not resizing if container is resized

[lfwetteronline]

If the ktd-grid has bin resized, the ktd-grid-item dont change there position.

My example component:

:host{
    display: block;
    width: 100vw;
    height: fit-content;
    min-height: 100vh;
}

#grid-container{
    width: 100vw;
    height: 100vh;
    overflow: scroll;
}

.item{
    background-color: var(--bg-secondary);	
	box-shadow:
		/* offset-x | offset-y | blur-radius | spread-radius | color */
		0px 16px 24px 2px hsla(0,0%,0%,0.14), 
		0px 6px 30px 5px hsla(0,0%,0%,0.12), 
		0px 8px 10px -5px hsla(0,0%,0%,0.2);
}

#grid{
    height: 100%;
    min-height: 100vh;
    height: 100vh;
    width: 100%;
    
}

  <ktd-grid [cols]="6"
  [rowHeight]="100" [layout]="layout" [backgroundConfig]="background" [gap]=10 style="min-height: 100vh;" [scrollableParent]="scroll">
<ktd-grid-item *ngFor="let item of items; trackBy:trackById" [id]="item.id" class="item">
<!-- Your grid item content goes here -->

<!-- Optional Custom placeholder template -->
<!-- <ng-template ktdGridItemPlaceholder>
     Custom placeholder content goes here 
</ng-template> -->
</ktd-grid-item>
</ktd-grid>
</div>

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { KtdGridBackgroundCfg, KtdGridLayout, KtdGridModule } from '@katoid/angular-grid-layout';
import { ktdTrackById } from '@katoid/angular-grid-layout';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule, KtdGridModule],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.css',
})
export class DashboardComponent  {
 

  items: {id: string, data: string}[] = [{id: '0', data: "test"}, {id: '2', data: "test2"}];

  layout: KtdGridLayout = [
    {id: '0', x: 0, y: 0, w: 3, h: 3},
    {id: '1', x: 3, y: 0, w: 3, h: 3},
    {id: '2', x: 0, y: 3, w: 3, h: 3, minW: 2, minH: 3},
    {id: '3', x: 3, y: 3, w: 3, h: 3, minW: 2, maxW: 3, minH: 2, maxH: 5},
];

  background: KtdGridBackgroundCfg = {
    show: "always",
    borderColor: "#cdcdcd00",
    borderWidth: 0,
    gapColor: "#ababab44"
  }
trackById = ktdTrackById
}

Im using Angular 17 with SSR enabled.

To reproduce, create the dashboard component. Open the dev console and drag the border. The grid will change, but the items not.

[mauriciocirelli]

I have a very similar situation here...

Have you found a workaround for it?

[BartVanGestel]

In the demo's there is the following code

    ngOnInit() {
        this.resizeSubscription = merge(
            fromEvent(window, 'resize'),
            fromEvent(window, 'orientationchange')
        ).pipe(
            debounceTime(50)
        ).subscribe(() => {
            this.grid.resize();
        });
    }

This works great if you resize the window. But won't resize on initial load. I have created the following snippet that will resize the grid once after the Initial load:

ngAfterViewInit(): void {
    // Resize the grid after the first render to avoid issues with the grid not being properly rendered.
    timer(1).subscribe(() => {
      this.grid.resize();
    })
}

Works great currently but not really the way to go I guess.
Sidenote, I've disabled the animations so it won't 'flikker' on initial load.