search

katoid / angular-grid-layout

Responsive grid with draggable and resizable items for Angular applications.
https://katoid.github.io/angular-grid-layout
MIT License
462 stars 61 forks source link

Changing red background when dragging an element #8

Closed omeragictarik closed 3 years ago

omeragictarik commented 3 years ago

Is there a possibility to change the red background which shows while moving the boxes? image

llorenspujol commented 3 years ago

Solution

Yes, changing the color of the placeholder is totally possible. What you have to do is style the element with the class .ktd-grid-item-placeholder. Take in account that this placeholder item is created inside the ktd-grid and therefore you have no direct access to it, so you have 3 options:

1- Use ::ng-deep. 2- Use ViewEncapsulation.None in the component that uses the grid. 3- Put the styles in your main.scss or some global .scss file, it would make sense If that placeholder color is for all your grids.

Here is an example using 'ng-deep': (note that the color of the placeholder is orange now) https://stackblitz.com/edit/angular-grid-layout-placeholder-color?file=src/app/playground/playground.component.scss

Future (thoughts about the placeholder related future and maintenance)

1- The class .ktd-grid-item-placeholder is not mean to be changed in any way, so is safe to use it. In case of change, I would consider it a major API change and would end up on a new major version. 2- In the future the placeholder would be able to be replaced for ANY element provided by the consumers of the lib. This is a TODO feature that I hope could be done in the near future. If anyone is coming here interested on changing some parts of the placeholder, and styles are not enough, you can DM me and start planning the placeholder replacement and also take part of it.

omeragictarik commented 3 years ago

Thank you very much!

llorenspujol commented 3 years ago

You are welcome:), I am closing the issue.