search

swiety85 / angular2gridster

Angular implementation of well known Gridster (no jQuery, no external libraries, only Angular and Rx.js).
https://swiety85.github.io/angular2gridster/
MIT License
203 stars 75 forks source link

panel-tittle shows before gridster-item loads. #217

Closed dmend078 closed 6 years ago

dmend078 commented 6 years ago

I noticing that when the pages fires I can see the panel-titles in the left corner. This happens really quick before the widgets are placed. After doing a lot of debugging I noticed that when the page fires it creates the gridster-items in the left corner, that is why you see the tittles. I try to give it a visibility: hidden until the widgets finish looping, but once the looping is done the style inside the panel-heading doesn't change. Is like if there were 2 different gridster-item.

swiety85 commented 6 years ago

You can use ready output attribute on GridsterComponent to prevent browser to show items before they are not ready. Example: Component template:

<gridster ... (ready)="isDashboardReady = true" [ngClass]="{'dashboard-ready': isDashboardReady}">
  <gridster-item ...> ... </gridster-item>
</gridster>

styles.css:

gridster-item {
  visibility: hidden;
}
.dashboard-ready gridster-item {
  visibility: visible;
}
swiety85 commented 6 years ago

There is gridster--ready class assign to <gridster> element at the moment when items are rendered and positioned correctly. It is the same as in the example above.