Open lfwetteronline opened 10 months ago
If the ktd-grid has bin resized, the ktd-grid-item dont change there position.
ktd-grid
ktd-grid-item
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.
I have a very similar situation here...
Have you found a workaround for it?
If the
ktd-grid
has bin resized, thektd-grid-item
dont change there position.My example component:
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.