Skip to content
New issue

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

Grid items not resizing if container is resized #108

Open
lfwetteronline opened this issue Dec 8, 2023 · 1 comment
Open

Grid items not resizing if container is resized #108

lfwetteronline opened this issue Dec 8, 2023 · 1 comment

Comments

@lfwetteronline
Copy link

lfwetteronline commented Dec 8, 2023

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
Copy link

I have a very similar situation here...

Have you found a workaround for it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants