We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
The text was updated successfully, but these errors were encountered:
I have a very similar situation here...
Have you found a workaround for it?
Sorry, something went wrong.
No branches or pull requests
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.
The text was updated successfully, but these errors were encountered: