I have created a plunker here http://plnkr.co/edit/VIMTutnu1BzGVfujlhhJ and wanted to see if anyone can throw some pointers to make these cell backgrounds(obviously show up as square) into circles. Basically I am using the ngCellText as shown below:
cellTemplate: '<div title="{{row.entity.EHStatus.TOPPER.desc}}" class="ngCellText"'+
'ng-class="{\'green\' : row.getProperty(\'EHStatus.TOPPER.code\') == \'1\' ,\'orange\' : row.getProperty(\'EHStatus.TOPPER.code\') > \'1\',\'red\' : row.getProperty(\'EHStatus.TOPPER.code\') == \'0\',\'yellow\' : row.getProperty(\'EHStatus.TOPPER.code\') < \'0\'}" > </div>'},
Are there any good clean ways of achieving this? Please let me know!!
Just give border-radius: 50% to all your color classes
Something like this:
.green {
background-color: green;
color: white;
border-radius: 50%;
}
Related
I am creating a list of offers with ng-repeat. Depending of each offer status, they should have different colors and, when active, it should have a different specific status as well. The active logic works well, but what is happening now, is that they all render as true, so they're all the same color. Feel free if you have any other ideas of doing this.
This is what I see when I inspect, after it renders:
ng-class="{'offer card-active-false card row text-left': currentOfferId === offer.id, 'offer card card-false row text-left': currentOfferId !== offer.id}" class="offer card card-true row text-left"
Here is what I have on HTML:
<div ng-repeat="offer in $parent.offersList track by $index">
<button ng-click="$ctrl.setCurrentOffer(offer)">
<div ng-if="" ng-class="{'offer card-active-{{offer.status}} card row text-left': currentOfferId === offer.id, 'offer card card-{{offer.status}} row text-left': currentOfferId !== offer.id}">
//then I have my divs
</div>
</button>
</div>
CCS:
.card-true {
background-color: #00FF44;
}
.card-false {
background-color: #C4C4CC;
}
.card- {
background-color: yellow;
}
.card-active-true {
background-color: #fff!important;
border-color: #00FF44;
}
.card-active-false {
background-color: #fff!important;
border-color: gray;
}
.card-active- {
background-color: #fff!important;
border-color: yellow;
}
thanks!
Put classes that always need to be present in a normal class attribute.
Then simplify the classes you need and separate them so you don't have to over-complicate the logic. My suggestions may be off, but it should look something like this:
card-status-... - driven by offer.status
card-active - driven by `currentOfferId === offer.id'
Then you could easily put the logic in ngClass, which lets you specify an array whose members can be strings that represent class names or objects whose keys are class names and whose boolean values indicate whether the class should be included. Like so:
<div class="offer card row text-left"
ng-class="[
'card-status-' + offer.status,
{'card-active' : currentOfferId === offer.id}
]">
Now in your CSS you can set up those classes by combining selectors:
.card {
background-color: yellow;
}
.card-status-true {
background-color: #00FF44;
}
.card-status-false {
background-color: #C4C4CC;
}
.card.card-active {
background-color: #fff !important;
border-color: yellow;
}
.card.card-active.card-status-true {
background-color: #fff !important;
border-color: #00FF44;
}
.card.card-active.card-status-false {
background-color: #fff !important;
border-color: gray;
}
Here is my solution, remove the complicated logic, which is obviously not binding properly inside the ng-class, it will only confuse and its not worth the time.
Note: I have used $scope variables instead of this, please use the GIST of the JSFiddle I'm sharing and try to build your code, I am unsure of the color requirements, please check and tell me if the code resolves your issue.
JSFiddle Demo
CODE:
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
$scope.offersList = [{id:1, status: false}, {id:2, status: false}, {id:3, status: false}, {id:4, status: false}];
$scope.currentOfferId = 0;
$scope.setCurrentOffer=function(index){
$scope.currentOfferId = $scope.offersList[index].id;
$scope.offersList[index].status = !$scope.offersList[index].status;
}
$scope.filterClass = function(offer){
var bool = offer.status ? 'true' : 'false';
if($scope.currentOfferId === offer.id){
return 'offer card-active-'+bool;
}else{
return 'offer card card-'+bool;
}
}
});
It's not completely clear which classes you want applied to which situation. You need to hand ng-class an array with each separate condition, this was probably the root of your problem.
You can also use ternary for this (angular v.1.1.4+ introduced support for ternary operator) which makes things look a little neater:
<div ng-class="[offer.id ===currentOfferId ? 'card-active-true' : 'card-active-false',
offer.status ? 'card-active-true' : 'card-false' ]"
class="offer card row text-left" >
I want to use both [href*="foo"] and :last-of-type. I can't find a combination that works. The output is like:
Artist Name
Genre
Genre
Topic
Topic
Topic
.tags a[href*="genre"]:last-of-type { margin-bottom: 1rem; }
I want to style some bottom margin on the last "artist" and the last "genre". Here's a fiddle: https://jsfiddle.net/40whp0ph/. Note that the margin-bottom for Artist and the last Genre are what I want, but not the margin-bottom for the first Genre.
Can anybody point me to how to remove the margin-bottom from all but the last Genre?
Thanks!
The solution is the totally underappreciated + combinator.
With this, we can give some selector a style, and then reset the style for the same selector if it occurs again directly after. In other words, give the style only to the first element with this class.
.tags a { display: block; }
.tags a[href*="genre"] { margin-top: 1rem; }
.tags a[href*="genre"] + a[href*="genre"] { margin-top: 0; }
.tags a[href*="topic"] { margin-top: 1rem; }
.tags a[href*="topic"] + a[href*="topic"] { margin-top: 0; }
<div class="tags">
<h3>Tags</h3>
Artist: Glad
Genre: A Capella
Genre: Hymns
Topic: Faith
Topic: God
Topic: Prayer
</div>
Or, if you are sure there won't be anything else in the div except the elements, you can shorten the css to something like this:
.tags a {display: block;}
.tags a:not([href*="genre"]) + a[href*="genre"],
.tags a:not([href*="topic"]) + a[href*="topic"] {margin-top: 1rem;}
I'm going to create a less code that will give different background-color to element depending on it's class. This will be for list of attachments, so class name is based on attachment extension.
I do support some typical extensions:
.label{
&.label-pdf{
background-color: #c70000;
}
&.label-doc, &.label-docx, &.label-odt{
background-color: #157efb;
}
&.label-xls, &.label-xlsx, &.label-calc{
background-color: #069e00;
}
&.label-ppt, &.label-pptx, &.label-odp{
background-color: #9e3c15;
}
&.label-jpg, &.label-png, &.label-gif, &.label-png, &.label-ttf{
background-color: #95009e;
}
}
but the problem is with some unusual extensions, or even files like: jpg, jpeg, doc, docx, this is why I would like to use expression from CSS. In pure CSS I could use:
.label.[class^="label-"]{
background-color: rgba(0,37,100,0.4);
}
And put this code at the beginning so other classes could override this one.
But unfortunately this sign ^ (I suppose) is breaking my Less compilation. I have been trying to do something like this:
~".label.[class^='label-']{
background-color: rgba(0,37,100,0.4);
}"
AND
.label{
&.~"[class^='label-']"{
background-color: rgba(0,37,100,0.4);
}
}
But still not working. So is it possible to use this selector?
It is not working because your syntax seems to be wrong and not because of any issues with Less.
The below code is invalid because of the . present between the label and the class^="label-"]. Attribute selectors do not require a . before them. It is necessary only for class selectors.
.label.[class^="label-"]{
background-color: rgba(0,37,100,0.4);
}
The correct version would be the following:
.label[class^="label-"]{
background-color: rgba(0,37,100,0.4);
}
and so in Less terms, if you want nesting, it would be as follows:
.label{
&[class^='label-']{
background-color: rgba(0,37,100,0.4);
}
}
.label.[class^="label-"] { /* this won't work */
background-color: rgba(0, 37, 100, 0.4);
}
.label[class^="label-"] { /* this will */
color: green;
}
<label class='label-a label'>Label A</label>
<label class='label-b label'>Label B</label>
Another thing to note is that the ^= is a starts with selector and so when your element has more than one class, the class that resembles label- should be the first class in the list and not the label. If we make the label as the first class then (like seen in below snippet) it won't work because then the class doesn't start with label-.
If the first class in the list is indeed label then you should consider using the *= (contains) selector. But be careful when using the contains selector because it will sometimes select unintended elements like those with class label-not, not-label etc.
.label.[class^="label-"] { /* this won't work */
background-color: rgba(0, 37, 100, 0.4);
}
.label[class^="label-"] { /* this won't too */
color: green;
}
.label[class*="label-"] { /* this will */
border: 1px solid green;
}
<label class='label label-a'>Label A</label>
<label class='label label-b'>Label B</label>
I have same problem. I use this in less file.
[class^="customForm-"] { ... }
But for my HTML it does not works.
<div class="form form-01 customForm-radioList">...</div>
The problem is in tha fact that string "form form-01 customForm-radioList" does not starts with "customForm-" it starts with "form".
Solution
Use contains selector W3 school.
[class*="customForm-"] { ... }
I am working with a Sencha Touch app with the component "segmentedbutton"
{
xtype : 'segmentedbutton',
cls : 'filterbar-segmented-button',
pressedCls: 'filterbar-segmented-button-pressed',
items : [
{
itemId : 'showAllCustomers',
iconCls : 'user',
iconMask: true,
pressed : true
},
{
itemId : 'showCustomersWithSurvey',
iconCls : 'compose',
iconMask: true
}
]
}
I am specifying different css classes depending of the button is pressed or not.. but it is not working correctly and the colour of the font is not changing..
Here the css code:
.filterbar-segmented-button {
padding-left: 18%;
color: blue;
.filterbar-segmented-button-pressed{
background-color: blue;
color: white;
}
}
What am I doing wrong?
Thank you in advance
Your Applying Css In Wrong Way the Hierarchy of the Css Class is Wrong
'filterbar-segmented-button',
'filterbar-segmented-button-pressed'
These Two Css Will be applied to the Same Segmented Button.
Inorder to Apply the Presed Cls For the Button
.filterbar-segmented-button.filterbar-segmented-button-pressed{
//PRessed Cls Code
}
This Will Work As Expected
I found the solution of this way..
.filterbar-segmented-button {
padding-left: 18%;
color: blue;
.filterbar-segmented-button-pressed{
background-color: blue;
.x-button-icon,
.x-button-label {
color: #f8f8f8;
}
}
}
Your css is not correct. Try this.
.filterbar-segmented-button {
padding-left: 18%;
color: blue;
}
.filterbar-segmented-button-pressed{
background-color: blue;
color: white;
}
I'm trying to create a property grid with ExtJS. The problem I'm having is that the text is too wide for the column. Is there anyway to force text to wrap around and just create a taller row? Here's what I have so far: http://jsfiddle.net/lordzardeck/pLYt3/1/
Basically i'd like the title row to expand to read this:
A Reason for Spelling (Level B):
Teacher's Guidebook
is this possible? if so, how?
Just add this CSS:
.x-property-grid .x-grid-row .x-grid-property-name .x-grid-cell-inner {
white-space: normal;
}
.x-property-grid .x-grid-row .x-grid-property-name .x-grid-cell-inner,
.x-property-grid .x-grid-row-over .x-grid-property-name .x-grid-cell-inner {
background-image: none;
}
.x-property-grid .x-grid-row .x-grid-property-name,
.x-property-grid .x-grid-row-over .x-grid-property-name
{
background-position: -16px 1px;
background-image: url("http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/themes/images/default/grid/property-cell-bg.gif");
background-repeat: repeat-y;
}
Use customEditors property of the grid.
See your updated example.
Setting white-space: normal; causes rendering issues when scrolling, using ExtJS 6
You should set cellWrap: true on the column, as pointed out by this thread:
https://www.sencha.com/forum/showthread.php?205554-extjs-grid-column-text-wrap-around-auto-expand