All other css element working fine rather background-color and color.
<md-button class="md-raised" ng-style="style1"
ng-click="style1=style; style2=null;style3=null;style4=null;removable=0;loadPorcessBarcodes();Head.ProcessMode=1"
ng-class="{'selected-btn': Head.ProcessMode == 1}">Auto Nozzle From Stock</md-button>
My css:
.selected-btn {
padding: 2px;
font-size: 20px;
color: #ffffff;
background-color: #122b01;
}
It seems as you've been using ng-style, which is already applying background-color and color style. So even though you apply a class over it with the overridden property, the same element would not reflect, because inline CSS takes first preference. If you wanted to enforce background-color and color properties to be enforced then mark them as !important to see the expected behavior.
Other better way to solve this problem would moving style1 to new class and apply it using ng-class with its appropriate expression.
I have a simple form that is inside Angular UI Bootstrap's tabs. Form controls have tooltips associated with them to show errors. I'm using custom event that will toggle tooltip visibility.
The idea is to have tooltip visible on required fields.
With UI-Bootstrap version 1.3.2 and Angular 1.4.8 everything is working fine but since I upgraded to Angular 1.5.3 tooltip is not showing anymore. It will show once I actually type something in the text field and delete it which makes me believe that now requires the model to be initialized.
I have here two plunks that will show exactly what is going on:
Working plunk (with angular 1.4.8) - https://plnkr.co/edit/IkuOdCrcFJ8lBeNA5sSh
<data-uib-tabset>
<data-uib-tab>
<data-uib-tab-heading>Tab 1</data-uib-tab-heading>
<form name="testform">
<input type="text" name="test" id="test"
data-ng-model="test"
data-ng-required="1"
data-tooltip-append-to-body="true"
data-tooltip-placement="right"
data-uib-tooltip="Required!"
data-tooltip-trigger="none"
data-tooltip-is-open="testform.test.$error.required" />
</form>
</data-uib-tab>
<data-uib-tab>
<data-uib-tab-heading>Tab 2</data-uib-tab-heading>
Content 2
</data-uib-tab>
</data-uib-tabset>
Not so working plunk (with angular 1.5.3) - https://plnkr.co/edit/Wl3Bq13FKPnqW7RqwfiJ
I noticed as mentioned in the comments that there is a class being attached - uib-position-measure. It has 3 styles that are causing the issue:
top: -9999px !important
left: -9999px !important
visibility: hidden !important
EDIT - I'm reorganizing my post now that I've dug pretty deep into this. Still don't think I have a great solution, but at least have some info and options.
Solution 1
Simply remove the culprit class uib-position-measure with javascript and then adjust the top and left styles on .tooltip.
Plunker
window.onload = function() {
var tooltip = document.getElementsByClassName('tooltip')[0];
tooltip.className = tooltip.className.replace(/\buib-position-measure\b/,'');
}
.tooltip {
top: 42px;
left: 150px;
}
Solution 2
Overwrite the styling that is causing the issue with javascript.
Plunker
<script type="text/javascript">
window.onload = function() {
var tooltip = document.getElementsByClassName('tooltip')[0];
tooltip.setAttribute("style", "visibility: visible !important; top: 42px !important; left: 150px !important;");
}
</script>
Solution 3
I was able to find where the .uib-position-measure class is created in the ui-bootstrap.js file. I removed !important from the visibility, top and left. After that I was able to fix the issue using css on the .tooltip class.
Plunker
ui-bootstrap.js is the file I created, copied the original over, and modified the uib-position-measure class - it is at the bottom on line 7327.
In style.css I simply added the below:
.tooltip {
visibility: visible;
top: 42px;
left: 150px;
}
Related Issue
I was also able to find an issue on GitHub related to this - https://github.com/angular-ui/bootstrap/pull/5530
Someone removed some inline styles and added them as a class, so that they could be overwritten by CSS instead of using javascript. This may be the best way to handle it - https://github.com/angular-ui/bootstrap/pull/5530/commits/44643775dece535b3ffa62d7edae86eaa12ac154. The problem is finding the location of the uib-position-measure inline styling and handling it the same way.
Using popover-popup-delay repositions the element and the class uib-position-measure is no longer active on it.
I want to use ng-tags-input in my project.
I try to set diffrent color for each tag according to color property object in array.
Here is plunker I am working on.
For this purpose I need to override tag-item css class in ng-input template.
Here is the example of ng-input template:
<script type="text/ng-template" id="tag-template">
<div class="tags-input" ng-style="{background: data.color}">
<span>{{$getDisplayText()}}</span>
<a class="remove-button" ng-click="$removeTag()">✖</a>
</div>
in this row I try to override tags-input css class:
<div class="tags-input" ng-style="{background: data.color}">
And here is result I get:
as you can see on left and right edges not colored.
Any idea what I am doing wrong?And how to override the tags-input css class??
If you look at the markup, you'll see that the .tags-input div where you apply your background color style is embedded into an li element, which has a laft and right padding of 5px. That's why the color is not applied on the full width of the button.
So, make sure to apply your own stylesheet after the ng-tags-input stylesheet, and override some CSS rules in order for the lito have no padding, and for the div with the background color to have a padding instead:
/* override default tag styles for colors to look less ugly */
tags-input .tags .tag-item {
padding: 0;
height: 27px;
}
.tags-input {
padding: 0 5px;
border-radius: 2px;
}
Here's your plunkr modified to make that happen.
I started to use Angular Material in my project and I was wondering how I can change the svg color inside an am-button.
This is my code:
<md-button class="md-fab md-primary">
<md-icon
class="ng-scope ng-isolate-scope md-default-theme"
style="height: 14px; width: 14px;"
md-svg-src="img/material-icons/core/arrow-forward.svg"
></md-icon>
</md-button>
What do I need to add to change the color of the svg from the curent black to white, just like in Google's button demo? (section "Icon button using Font-icons")
I'm on angular-material 0.8, and I simply added
style="color:white;font:bold;"
to the md-icon element.
For the people trying to color their md-icon, I found out that I had the same problem using Angular 1.3.x and Angular Material 0.8.x.
I fixed the problem by editing my SVG files and deleting the "fill" attribute that was overriding any inherited color.
After deleting this "fill" attribute in each SVG file, I could properly choose the color I wanted to assign to the icon thanks to CSS as specified by Jason Aunkst.
The SVG is under the md-icon, so you could add this to your style:
md-icon {
color: red
}
md-icon svg {
fill: inherit;
}
The following is the only way I've gotten it to work via stylesheets.
md-icon {
svg {
path {
fill: #ffffff;
}
}
}
Am using this in the CSS :
.my-icon svg
{
fill : #fff;
}
And in the HTML :
<ng-md-icon icon="search" class="my-icon"></ng-md-icon>
Works fine!
You should be able to do this by add "fill:white" to the style of the icon.
<md-icon class="ng-scope ng-isolate-scope md-default-theme" style="height: 14px; width: 14px; fill:white" md-svg-src="img/material-icons/core/arrow-forward.svg"></md-icon>
Add this to your css:
svg {
fill: inherit;
}
The svg will now inherit the fill attribute of your md-icon
<md-icon style="fill: red;" md-svg-src='/img/ic_menu_white_24px.svg'></md-icon>
I was having a similar problem when trying to change default svg icon color. For those who are experiencing the similar issue, make sure you check the angular-material version you're currently using. Currently, I'm using the angular-material "0.7.1" and this is quietly important.
NOTE: with my current Angular-material (0.7.1) version, the <mdIcon></mdIcon> directive only checks to see if attr.Icon is defined or not during postLinking compileFunction. With this implementation, in order to reference your svg icon files, you simply add icon attribute to your <mdIcon icon="iconsDir/path_to_icon_file.svg"></mdIcon> element directive. Notice in the earlier angular-material version, you might have use md-src-svg for referencing your svg files, its no longer the case in 0.7.1 version.
So if you were using 0.7.1 and following above instruction, you should have your svg icon rendering correctly, now its time to change the background-color of the svg you're using.
Raw svg file before any modification:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24">
<g>
<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" />
</g>
You should have a folder within your project where you save all your svg icons, in my case, I have a folder named icons where I store all my svg icons. The example svg file above is the non-modified svg icon where I got it from https://github.com/google/material-design-icons. (Default its rendering as a black svg file)
To change the default svg file, you would simple add a fill attribute to your raw svg file. See modified svg file version:
<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" fill="green" />
I simply added fill="green" the path element svg file, and now my svg icon is rendering as color green instead of default black. I know some of you guys might be using a different version of angular-material, but the mechanism of changing default svg color should apply the same. Hopefully this can be helpful to solve your problems, thanks!
The issue seems to be with the downloaded SVGs from Google Design icons as they override the fill attribute in the svg root. Compare the view source of SVGs on Google Design with the ones used in the example.
Solution:: Override fill in css.
md-icon svg {
fill: currentColor;
}
One way to do it is by setting a custom class selector.
HTML:
<md-button class="md-fab mybtnstyle">
<md-icon md-svg-src="img/icons/cake.svg"></md-icon>
</md-button>
CSS:
.md-button.md-fab.mybtnstyle {
background-color: blue;
}
.md-button.md-fab.mybtnstyle:hover {
background-color: red;
}
Codepen here: http://codepen.io/anon/pen/pjxxgx
Easiest way out
Now there's no need to change the svg or the fill property.
Simply add the !important to md-icon's color property in CSS:
md-icon {
color: #FFF !important;
}
I was having a similar problem, I needed to change the SVG color using CSS, but I also needed to keep the original SVG color (e.g. fill="#fff") when no CSS was supplied.
I enhanced Jason Aunkst's approach to make it work. Here's the solution:
md-icon[style*="color:"] svg [fill] {
fill: inherit;
}
That class will set any svg's child element with a fill attribute to inherit the color value as long as the svg is a child of an md-icon element that contains the style attribute with a color value.
It will only work on SVG's that are only using one fill color though. Adjust as needed, hope it helps!
I have an AngularJS 1.2.2 web application with a <div> that I show/hide based on some $scope property. Using the ngAnimate module, I animate the showing and hiding of the <div>.
<div id="square" ng-show="showSquare" class="animate-shiny"></div>
I also have a class I want to place on this <div> and for this I use ngClass.
<div id="square" ng-show="showSquare" class="animate-shiny" ng-class="{ cool: extraCool }"></div>
And as it so happens, sometimes that class gets applied at the same moment as when the <div> is shown/hidden. This causes the show/hide animation to not work anymore, apparantly it finds ngClass more interesting to animate, even though I don't want to use ngAnimate for that animation.
Here's a Plnkr that demonstrates the behavior. Clicking the show/hide button works great, clicking the make cool button works great, but the button that combines these two causes the show/hide animation to break.
How do I fix this? And can I do it without manually addressing $animate?
Thanks in advance!
The problem is that you are trying to animate using the class and not discriminate between when things should animate. That is, your transition effect applies to the class in general, which ng-animate perceives as having to do work whenever that class is referenced. I modified your css a bit to get pretty close, if not exactly, what you want:
#square {
width: 50px;
height: 50px;
background-color: blue;
transition: 0.4s all ease-out;
}
#square.cool {
box-shadow: 0 0 10px 3px green;
background-color: lightgreen;
}
#square.ng-hide-add, #square.ng-hide-remove
{
display: block !important;
}
#square.ng-hide-remove, #square.ng-hide-add.ng-hide-add-active{
margin-left: -80px;
opacity: 0;
}
#square.ng-hide-remove.ng-hide-remove-active, #square.ng-hide-add{
margin-left: 0;
opacity: 1;
}
Here is the new plunkr so you can play with it: http://plnkr.co/edit/a7wiZfCrEGCXfIDSvF9r?p=preview
If you want to ONLY animate the show/hide and do not want a transition for the color, simply move the transition to the #square.ng-hide-add, #square.ng-hide-remove declaration.