We have a json datasource populating an html page just fine. ng-style, ng-switch don't
appear to address our issue. We need to conditional apply on the fly css styling based
on the return value from ng-repeat. For example when the value returned from
{{mem.name}} is 'restricted' we need the background to show as yellow and the text colored black. When the value of {{mem.name}} is 'closed' we need the background to show as red and the text colored white. This has to happen based on the return value and not be based on any user interaction. Thank you in advance for any direction offered.
Try adding the below to the repeating element HTML:
ng-class="{{mem.name == 'restricted' && 'restrictedClass' || mem.name == 'closed' && 'closedClass'}}"
Then in your CSS
.restrictedClass{
background:yellow;
color:black;
}
.closedClass{
background:red;
white;
}
Related
We have this square <div> element which has a specific class applied for style. Inside there's a vertically/horizontally aligned <span> element which has sprite class applied to show an image.
The square has a black background and the image is a flat yellow icon. The idea is to switch the colors when the user is touching the whole square (including the background and the image). For this we need to switch 2 classes, on for the outer <div> (to show a yellow background) and another for the inner <span> to display a black image from the sprite.
The problem is, how to achieve this with AngularJS and touch down and up events. We are using angular-touch but that simply overrides ngClick for a better implementation for mobile/touch devices and adds ngSwipeLeft and ngSwipeRight directives. Neither doesn't seem to really help with our issue.
What would be the best way to achieve this effect with AngularJS?
I would use a scope boolean value to indicate when the div is touched, based on javascript events touchstart and touchend, then have ng-class show the correct class based on that boolean. Example:
<style>
.color-white {
color : white;
}
.background-green {
background : green;
}
</style>
<button my-touch="myIndicator"
ng-class="{
'color-white' : myIndicator,
'background-green' : myIndicator
}">Touch this</button>
.directive('myTouch',function() {
return {
link: function ($scope, $elem, $attrs) {
var _t = $attrs.myTouch;
$elem.on('touchstart touchend',function(e) {
$scope[_t] = (e.type === 'touchstart');
$scope.$apply();
});
}
}
});
I have this code that changes the styling of the checkbox "tick" mark on selecting the checkbox,
.x-input-checkbox:checked + .x-field-mask:after {
//Your style here
}
P.S. The above code is only for the check mark not the whole field.
but I dont know how to change the background color of the checkbox field on selecting it using purely CSS (the whole field)
You have to manipulate the .x-field-mask class. .x-field-mask:after is only used to draw the tick.
.x-field-mask {
background-color: green;
}
should do the trick.
I have a table with a column "amount". If the item in the cell is positive I want it to be colored in green, if not in red.
This can be done very easily using jQuery but I wondered if there's any trick using new CSS3 features that could help me achieve this without using javascript at all.
Is this possible?
Perhaps you can arrange for the server to generate HTML with data-* attributes containing the value. Then:
<span data-value="-123">-123</span>
[data-value^="-"] {
color: red;
}
In words, "if the value of the data-value attribute starts with a minus sign, color the text red."
Another idea is to use the :invalid pseudo-class. This will only work for an input element, unfortunately. However, you can disable it to prevent input and style it so it looks like regular text. You will also have to arrange to have the value placed in the value attribute of the input element:
<!-- specify a pattern which permits only positive numbers -->
<input type="text" pattern="\\d*" value="-123" disabled>
input:invalid {
color: red;
}
Neither of these approaches is ideal; you'll probably end up using JS.
When you return the data for the table, you will need to add a class to the TD for your amount column for any value is less than 0. You could use "negative" and give this a style of colour:RED; You can set the default style for the amount column TD as green for all positive values, and when the browser encounters the "negative" style it will set negative values to be red.
Use something like this:
<style>
.positive
{
background:green;
}
.negative
{
background:red;
}
</style>
<script>
function colorBackground(){
if (document.getElementById('yourid').value < 0){
document.getElementById('yourid').style.bgColor = "red";
}else {
document.getElementById('yourid').style.bgColor = "green";
}
}
</script>
Apparently this can't be done using CSS3 only.
Here is the jQuery code I used in the end:
$( document ).ready(function() {
$(".amount").each(function() {
$(this).addClass($(this).text() >= 0 ? "positive" : "negative");
});
});
If anyone has any shorter version of it, I'd be happy to have it :)
Thanks
In my web app (c#/MVC3), I have a huge set of checkboxes in a table. Rather than a table of checkboxes, I'd like for it to look like a wall of toggle buttons. To the user I want it to look like a wall of buttons and when they click one it is 'checked' and the button changes color.
I wasn't sure if there was CSS that could make a checkbox do this (look like a button and change colors on check rather than show a check mark), or if I would have to use some combination of buttons and javascript/jquery and hidden checkboxes or what.
The jQuery UI Button widget can handle that:
http://jqueryui.com/button/#checkbox
Yes, it is definitely possible to do what you want with pure CSS.
I think you should check out the jsFiddle mentioned on this question.
Radio buttons are generated by the operating system and cannot be easily styled.
If you wany something different you need to generate it using CSS/images and JavaScript.
First of all, I'd actually avoid doing this for usability concerns but if you still want to then read on.
This is actually quite tricky to achieve but it is possible. My solution avoids the need to assign individual IDs to your check-boxes.
Essentially, you will need an image sprite for the "on" and "off" states which you will position with the CSS background-position property, using a toggle class. Then, the following jQuery will allow you to not only swap the image state, but also confirm the respective checkbox as checked or unchecked for use of the form. Do note, that the "actual" checkbox is hidden from view but the functionality remains.
<form>
<input type="checkbox" class="custom" />
</form>
<style type="text/css">
.checkbox {
clear:left;
float:left;
background:url('your_image');
background-position:top;
width:20px;
height:20px;
display:block;
}
.toggled {
background-position:bottom !important;
}
</style>
$(document).ready(function () {
var checkboxes = $('form .custom'),
custom = $('<span></span>').addClass('checkbox');
checkboxes.before(custom);
checkboxes.css('visibility', 'hidden');
$('.checkbox').click(function () {
$(this).toggleClass('toggled');
var isChecked = $(this).next(':checkbox');
var value = isChecked.prop('checked') ? 'true' : 'false';
if (value == 'false') {
isChecked.prop('checked', true);
} else {
isChecked.prop('checked', false);
}
});
});
You will, of course, have to edit the CSS to suit your exact needs. I hope this helps as this task was deceptively non-trivial.
I am trying to make a specific column to blue color.
For that I am using
clientsTable.addColumnStyleName(3,"nameColumn");
And the CSS is:
nameColumn {
color:blue;
}
but it's not doing anything whereas if I change my CSS to this
nameColumn {
background-color:blue;
}
it works, i.e make header color red , but why is not changing text color ?
thanks
addColumnStyleName adds the CSS class to a <col> element in the DOM, and only a handful CSS properties apply there (see also browser compatibility table)
You'd want to apply a CSS class to each cell in the column instead, using Column#setCellStyleNames()
Try
.nameColumn {
color: blue !important;
}