Comments (9)
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.
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.
Related Issues (20)
- angular v17 has been released HOT 5
- The row width is too large
- [BUG] - Grid is bouncing/jumping in specifc browser size
- Auto Position Items When Browser Window Is Resized
- How to have scroll in the gridster while keeping the grid size
- Responsive and size of items
- is there a way to change grid matrix? HOT 1
- The vertical scroll does not work in mobile with fixedVertical
- Change style when moving grid items HOT 1
- Styling grid-item HOT 1
- getNextPossiblePosition() method issue
- What configuration setting allows to maximize item in available nearby space
- Empty Cell drop effect - RTL issue
- gridster-item initial position and display values are messing up Gantt Components
- How do I insert a container on top of the gridster-item?
- Gridster not allowing to add item when defaultItemCols and defaultItemRows is more then 1. HOT 1
- Support Angular 18 HOT 3
- v18 - Warning NG0955 - Track expression resulted in duplicated keys HOT 1
- Angular-gridster2 Version "^9.1.0" Widget Resize Exception HOT 1
- Zoneless angular support HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-gridster2.