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.
Related
The example given in bootstrap-select works by adding a tickicon to every selection. How would I override this feature so I can highlight my selections instead of adding a tickicon? I tried setting data-show-tick to false, but that doesn't seem to work for multiple selections.
I'm not sure where to go. Would appreciate advice.
<select class="selectpicker" multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
I've resolved this by hidding the tick icons with CSS.
For this, you may use the following css rule in your own css file (declared after the original bootstrap-select.css file) :
.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark { display: none !important; }
Or you can alter the original rule of the bootstrap-select.css file by changing it for :
.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark { position: absolute; display: none; right: 15px; margin-top: 5px; }
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 am trying to make simple demo of grid view .In which I have header of title (having gray background) actually I need to reduce the height of title or headers of table which have gray background .can we add alternate color of rows ? please see the given image .It header or tittle is too small as compared to my plunker .Secondly there is alternate color in row .can we add that in my plunker .
http://plnkr.co/edit/7bSnk0fU0NBOF1GIwHSK?p=preview
.search.list-inset, .search.list-inset .item:first-child {
border-radius: 50px;
}
.search .item-input .icon {
font-size: 200%;
}
.gray-20 {
background-color: #eee;
}
#media (min-width: 600px) {
.search {
width: 50%;
margin-left:auto;
margin-right: auto;
}
}
.mrginrightleft{
margin-left:5%;
margin-right:15%;
}
.brd{
border: 1px solid grey;
}
here is my code![enter image description here][1]
Updated Plunker
How to style striped rows
There are two ways to do this. One is pure CSS using the :nth-child(even) or (odd) pseudo classes. You can add a class to your row and just use style it how you want, such as:
my-class:nth-child(even) .col {
background-color: blue;
}
But I did it differently to teach you something about ng-repeat. Yes, it's for a loop, but it has a bunch of special properties that it exposes for you. Two in particular are $odd and $even. As you might expect, $odd returns true if it is an odd iteration and $even is true when the index is an even number.
So, you can use these with ng-class as part of your expression. Here, I'm adding a class of odd-row:
<div class="row" ng-repeat="column in displayData | orderBy: sortval:reverse | filter: query" ng-class="{'odd-row':$odd}">
Then to make the styles, I added the following rule. I applied the background-color to the .col children so that the background would be contained within the borders that are applied on the .col elements.
.odd-row .col {
background-color: #eee;
}
EDIT:
Actually, you are correct, ng-style would be a third-way, but it doesn't apply a class, it applies inline styles. Therefore, you need to pass it an object with you styles, so for example (simplified):
ng-style="{'color': 'red'}"
I have a html page with this code
<p id="roonnameDiv" >{{chatRoom}}</p>
and an app.js with the following code . It reflects the value corrrectly but if I try to style it with color at runtime it doesnt not reflect on the html page
$scope.$parent.chatRoom = $stateParams.roomId;
$scope.$parent.chatRoom.style = {"color":"green"};
I even tried using ng-color but in vain . Have head using html-unsafe tags t add html5 code to angular variables at runtime , perhaps I could use that to provide style of element but could not find any examples .
Essentially the requirement is of having various styled ( color ,size and fonts ) in roonnameDiv using angular framework
..................Edit .............................
I used the ngstyle as suggested by answers below
$scope.$parent.chatRoom = $stateParams.roomId;
$scope.myStyle = {color: "green"};
however the output text was just plain grey . On exploring it thorugh chorome inspector , I found it is inheriting some styles through body.
Switching off the body color tag just turns the text black instead of green .
Following is the body
<body ng-app="xyz" ng-controller="AppController" class="ng-scope">
This is the body style
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
I want specific style class to apply for different text components without affetcting the overall body style . Could you suggest how to do so ?
You can use ng-style directive.
In Markup
<p id="roonnameDiv" ng-style="myStyle">{{chatRoom}}</p>
In controller
$scope.myStyle = {color: "green", background: "blue"} // Write all the required styles here.
More on ng-style directive at: https://docs.angularjs.org/api/ng/directive/ngStyle
try this
<p id="roonnameDiv" ng-style="chatRoom.style" >{{chatRoom}}</p>
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.