Grid stylesheet about angular-gridster2 HOT 9 CLOSED

Hi @ruffiem ,
You mean you cannot override the default style ?
for me this works:

gridster {
  background: red;
}
// or
gridster:hover gridster-item {
  background: red;
}

If you have other issue please give me an exact example of what style you cannot override.

from angular-gridster2.

I can override the style using the !important flag in my SASS. Otherwise, it takes the default background.

Without important

Thank you @tiberiuzuld

from angular-gridster2.

Hi @ruffiem .

For me this worked:

:host gridster /deep/ gridster-preview {
  background: red;
}

Let me know if this works for you

from angular-gridster2.

Hi @tiberiuzuld,

Thanks for the answer again 😃 .

The Gridster default style is set directly on the :host which add styles to the component on the lowest possible level.

If you don't style the component directly on the :host (eg. your example), Angular will not listen to styles coming from a higher level - which is an acceptable behaviour.

Let's take the case you're using Angular material and use its practice recommendations to style custom components. You must target the element because you don't have access to :host (gridster is not equal :host). It means that if you're not styling the component directly in the component stylesheet, you must add !important flags on every CSS property you want to override which is not defined as a good practice.

A good alternative would be to use classes to give a default style to Gridster instead of using :host which is too low and not easily accessible. It will not affect the code much and it would be easier for developers to add custom style to the component.

What do you think ?

from angular-gridster2.

Hi @ruffiem

So I move the gridster-preview css to it's own css file. Added class gridster-preview to the
gridster-preview

Now this css will override the background

gridster /deep/ .gridster-preview{
  background: red;
}

You can test this on v2.9.2

Let me know if this fixes your issue.

from angular-gridster2.

Yes, it works like that, thank you @tiberiuzuld

from angular-gridster2.

@ruffiem 👍

from angular-gridster2.

Sorry, but how do I change the color of the gridster gray background color?

gridster {
  background: red;
}

Did not work.

I don't think I should be directly changing it under angular-gridster2.umd.js file.
So what is the proper way of changing it?

from angular-gridster2.

@idreeshaddad
:host gridster{
background: red;
}

from angular-gridster2.