angularjs ng-grid: how to change header style - css

How can I restyle the header of ng-grid?
In particular how can I change the background-color and the text color of the header row?

You can override the background-color property on the .ngHeaderCell class declared in the ng-grid.css to use the background color you want on the header cells.
If you don't want to modify the original ng-grid css, you can create your own css and load it after ng-grid's css in which you can later overide the same .ngHeaderCell class with:
.ngHeaderCell {
background-color: [your background color] !important;
bottom: 0;
color: [your foreground color] !important;
position: absolute;
top: 0;
}

I haven't looked into ng-grid before, but looks like a css file is provided for styling? I would advise either changing the actual css file, or over-writing these changes by declaring your own below where the grid.css is declared. Check link if that is what you are talking about.
https://github.com/angular-ui/ng-grid/blob/master/ng-grid.css
For instance, one of the css attributes in the above file is below, just do a ctrl-f and find the attributes you are looking to change.
.ngHeaderCell {
position: absolute;
top: 0;
bottom: 0;
background-color: inherit;
}

Related

Why my ng-class is not working

I am trying to display spinner when the button is clicked. I had one working plunker and I am trying to implement it little bit of tweak. My Plunker is here. I referred this working Plunker but no luck. I know m missing something small here.
ng-class="{true: overlay}[madeCall]"
Ok both answers point correctly one error, but there is also a fault in logic.
In the plunker you copied it applies a class called .grey when it is true but in conjunction with the css, he has e.g: .grey .overlay, the result is the desired.
If you want to copy that exact logic you have to add the .grey class and also change your css.
e.g:
css:
.grey .overlay {
background-color: #e9e9e9;
/* display: none; */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
}
and html:
<div ng-controller="mainCtrl" ng-class="{true: 'grey'}[madeCall]">
plunker
It should be:
ng-class="{overlay: madeCall}"
The syntax for ng-class is {className: Expression}, if the expression is truthy the class will be applied.
overlay should be there in quotes otherwise angular will lookup for overlay variable in scope.
ng-class="{true: 'overlay'}[madeCall]"
Demo Here

Overriding css style?

I look on Stack Overflow, and didn't find the solution, I know how to override style if style exists, just change its property. But now I have a strange style to override
Here is an example of what I have
First I have this one:
.slikezamenjanje img{
max-width: 100%;
max-height:150px;
padding-right:7px;
}
Now I need to override that style with just this one:
#zoomTarget .slikezamenjanje img {
max-width: 100%;
}
The problem is that first style appends second, but I don't want that, in this second style what I need is just one line, not to append from the first style?
Instead of override you can add another class to the element and then you have an extra abilities.
for example:
HTML
<div class="style1 style2"></div>
CSS
//only style for the first stylesheet
.style1 {
width: 100%;
}
//only style for second stylesheet
.style2 {
width: 50%;
}
//override all
.style1.style2 {
width: 70%;
}
You just have to reset the values you don't want to their defaults. No need to get into a mess by using !important.
#zoomTarget .slikezamenjanje img {
max-height: auto;
padding-right: 0px;
}
Hatting
I think the key datum you are missing is that CSS comes with default values. If you want to override a value, set it back to its default, which you can look up.
For example, all CSS height and width attributes default to auto.

How do I override CSS set on a pseudo element?

I know that has been asked before, but I find no clean way of overriding this CSS:
.ui-input-search:after {
content: "";
height: 18px;
left: 0.3125em;
margin-top: -9px;
opacity: 0.5;
position: absolute;
top: 50%;
width: 18px;
}
I need to leave ui-input-search on the element, but can add my own class, like:
.ui-input-search-no-pseudo:after {
content: "";
}
Question:
Is there an easy way to remove "pseudo-css" without having to overwrite the CSS line by line?
Thanks!
As far as I can tell there is no other way than to override all properties. The styles are defined on the element, they won't just disappear because of another selector that targets the element.
If you only want to remove the pseudo element from the page you can do content: none.
Added from comments below:
The difference between content: "" and content: none is that content: "" produces a pseudo-element with no content (i.e. an empty pseudo-element), whereas content: none prevents the pseudo-element from being generated at all.
Here content: ""; doesn't affect at all if you want to remove that pseudo you have to use content:none; it will remove previously added pseudo content.
content:none;
If that doesn't help you can also try :
display:none;
if still, it doesn't work then you could try the below, but I never suggest you use !important
display:none !important;
here is working jsfiddle
https://jsfiddle.net/ganeshswami99/52duu0x8/1/

How to get `:after` to work in extjs iconCls?

My css for a tree node icon is the following:
.icon {
background: url(http://dummyimage.com/100x100/ccc/fff);
width: 100px;
height: 100px;
position: relative;
}
.icon:after {
background: url(http://dummyimage.com/32x32/f0f/fff);
width: 32px;
height: 32px;
display: block;
content: ' ';
position: absolute;
bottom: 0;
right: 0;
}
I set iconCls to "icon" but it does not work, I also tried "icon icon:after" and "icon:after" but with no luck.
I use a modern browser and my overlay css is valid, but extjs doesnot seem to understand it. How can I overcome this problem?
The icon element is by default an <img> element. It's contents are replaced by the image. You can't use :before or :after with it, because they form part of the contents that get replaced. You will need to override the treeRenderer in Ext.tree.Column to apply your second image.
looks like you forgot the class prefix in one of youre tests try .icon:after {}

Overrule !important inline CSS

I am using the Wordpress plugins 'NextGEN Gallery' and 'JJ NextGen JQuery Carousel' because I'm trying to make a carousel that looks alot like the default looks of the last named plugin. The problem is that the plugin uses a div with a background image as a button and it gets this CSS:
div#about-jcarousel_container .jcarousel-skin-custom .jcarousel-prev-horizontal {
top: 188px !important;
}
Because of that, this doesn't work (the top: 0px part):
.jcarousel-skin-custom .jcarousel-prev-horizontal {
position: absolute;
top: 0px;
left: 0px;
width: 32px;
height: 32px;
cursor: pointer;
background: rgba(24, 16, 16, 0.43) url(prev-horizontal.png) no-repeat 0 0;
background-position-y: 50%;
height: 100%;
}
Where it gets nasty is that the 188px is never called anywhere, so I cannot just edit it to make it 0px but client side in the browser. So I've looked around and it seems that the plugin puts the 188px code in inline < style > tags. Because it has !important I can't just use !imporant in my template.css to overwrite it.
Is the another way to overrule the !important tags that are used inline? I realy would like the keep the plugin updateable.
The only way to override !important is to use !important again further in the cascade, so put it in a CSS file after the jcarousel one.
Alternatively, edit jcarousel
It seems that you are referring the jcarousel css file after your .css file in your html file. Keep the reference of the jcarousel .css file before your stylesheet(.css file). Then you can use !important again to override the default jcarousel .css file style property.
You can change the specificity of your code. If possible look for an ID as maybe the parent. And add !important to your top element.
#ID .jcarousel-skin-custom .jcarousel-prev-horizontal {
position: absolute;
top: 0px!important;
left: 0px;
width: 32px;
height: 32px;
cursor: pointer;
background: rgba(24, 16, 16, 0.43) url(prev-horizontal.png) no-repeat 0 0;
background-position-y: 50%;
height: 100%;
}
That's why the use of !important is discouraged. You can only override the !important with another !important and it's not always possible. When there are two rules with !important then the "most important" one is applied.
And the question now is, which one is more important?
inline styles are more important (e.g. <div class="someclass" style="inline style"></div>) than normal styles
more specific rules > less specific (#one .example tag .yeah > .yeah)
if two rules have the same priority, the last one applied wins
If you can't add a more important rule, then you can't override the !important. But you can use a script to add inline styles when the page is loaded. Example (with jQuery):
<script>
$(document).ready(function() {
$("#test").css("color","blue");
});
</script>
Example without jQuery:
<script>
window.onload = function () {
document.getElementById("test").style.color = "yellow";
}
</script>

Resources