Is it possible to change CSS/HTML attributes from GridsterItems ?

[felipeinfantino]

Hi, I want to change attributes like z-index , color and make the GridsterItems editable (I mean let the user put text inside), or display a video. Please let me know if thats possible. And really nice library by the way ;).

PD: It would be really nice to fully customize the GridsterItems dynamically

[felipeinfantino]

I handled that with this, but I am still not able to set the z-index , I have tried z-index : 999 !important and did not work. Any solution for that ? I want the elements in the Grid to go out of the grid , or at least to look as they where going out.

<gridster style="background-color: black" [options]="options"> <gridster-item (click)="test($event)" *ngFor="let item of dashboard; let i = index "" id="{{i}}" [item]="item" >

And then Query them with document.getElementById('theIndexIwantToTarget').

My Ultimate goal is to interchange items between Grids, I have been trying to do this but I dont know how

[felipeinfantino]

I was in deed changing the z-Index, but i dont know then why the grid-item does not overlap in the whole page. Can anyone help me with that please ? I would appreciate a lot.

[CarlosTenorio]

Any update? :(

[felipeinfantino]

@CarlosTenorio I couldn't solve the z-index problem. But if you describe exactly what you want to do, maybe I could have an idea how to solve it or how to approach a workaround

[jdieguez89]

This is a example, i´m using ng-bootstrap, try to set z-index gridsterItem to 0

[h4de5]

We have the very same problem here:

[jdieguez89]

@h4de5 I was able to solve this problem by assigning a z-index higher than the rest of the grid when the mouse was over the element [ngStyle]="{'z-index':(activeTimeGridster===item.id?3:0)+''}"

[h4de5]

we achieved something similar today. used onmouseenter to increase the zindex and reset the zindex if there was a previous item set.