katoid / angular-grid-layout

Responsive grid with draggable and resizable items for Angular applications.
https://katoid.github.io/angular-grid-layout
MIT License
462 stars 61 forks source link

Grid items not resizing if container is resized #108

Open lfwetteronline opened 10 months ago

lfwetteronline commented 10 months ago

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 commented 1 month ago

I have a very similar situation here...

Have you found a workaround for it?