I have an angular application and part of it spits out a piece of text that needs to be colorized dynamically, in order to do that I am injecting a span element where required and marking it with a class, so the output would be something like this:
Some text <span class="failResult">that's emphasized</span> and other text too.
I am using a td (it's inside a table) that has inner html binding to this value. The css for this class is very simple. There are several similar classes that change the appearance a bit based on calculated values, but they all look something like this:
.failResult {
color: #dd2222;
}
I'm getting the html showing the text correctly, but the color isn't showing on the portion within the span.
Things I have tried:
I used dev tools to view the output and the class is applied. Here is an example of the td as output by the browser: <td _ngcontent-c4="">17 Checks, 7 <span class="failResult">(61%)</span> Pass, 3 Fail, 5 Count/List, 2 Not Run</td>
I verified that the class exists in the css file, is loaded by the browser, and the name is typed correctly.
I applied the color attribute to the span directly through browser dev tools and it shows up correctly, the color of the text changes.
I tried setting the color instead of the class in the string value, however Angular sanitizes this for security. Incidentally it did NOT give me any sanitizing messages about the class.
I tried applying the other classes via browser dev tools and they also did not change the color.
Is there something I don't know that span will not reflect a color applied via class? How do you get this to work?
EDIT
Doesn't have much to do with this question but for completeness here is the code that generates the contents:
GetReportSummary(): string {
const values = [];
values.push(`${this.TotalChecks} Checks`);
if (this.PassingChecks > 0 || this.FailingChecks > 0) {
let resultClass = 'passResult';
if (this.PassPercent < 70) {
resultClass = 'failResult';
} else if (this.PassPercent < 90) {
resultClass = 'warnResult';
}
values.push(`${this.PassingChecks} <span class="${resultClass}">(${this.PassPercent}%)</span> Pass`);
values.push(`${this.FailingChecks} Fail`);
}
if (this.ReportingChecks > 0) {
values.push(`${this.ReportingChecks} Count/List`);
}
if (this.NotRunChecks > 0) {
values.push(`${this.NotRunChecks} Not Run`);
}
if (this.ErrorChecks > 0) {
values.push(`<span class="errorResult">${this.ErrorChecks} Error</span>`);
}
return values.join(', ');
}
This behavior is due to the way Angular uses encapsulation to scope its styles to specific components. If you add the style to your projects main styles.css file then it should work.
Related
I have an Angular component that generates mat-checkbox dynamically at runtime and I need to change the individual background of each checkbox differently with different color and I don't (won't) have the information before hand, only available at runtime.
I have the following ng-template for the checkboxes:
<ng-template #renderCheckbox let-id="id" let-attr="attr">
<mat-checkbox
[checked]="attr.show"
[color]="'custom-' + id"
(change)="onChange($event.checked, attr)">
{{attr.name}}
</mat-checkbox>
</ng-template>
where, attr in the template has the following interface type, these infomation are pulled from Highcharts' series and I didn't want to hardcode the color.
interface LinkedSeriesAttributes {
id: string;
name: string;
index: number;
color: string;
checked: boolean;
}
Since there is no way to create css classes before hand and there is no way to directly apply color to the mat-checkbox, I could only generate the <style>...</style> right at the beginning of my template.
In my component, I have code that will generate the style which would give me something like this:
.mat-checkbox.mat-custom-hello.mat-checkbox-checked .mat-checkbox-background::before {
color: #6E8BC3 !important;
}
.mat-checkbox.mat-custom-world.mat-checkbox-checked .mat-checkbox-background::before {
color: #9ED6F2 !important;
}
...
However, I tried various ways to dump it inside <style> without success. I tried:
<style>{{ dynamicCSSStyles }}</style>
Which, my IDE shows that's an error with the curly braces, although it compiled fine and ran without errors, I got nothing, can't even see the <style> tag.
I also tried to include <style> inside my dynamicCSSStyles variable, and angular just dumped the whole thing out as text...
What's the correct way to generate a <style> in Angular.
I've found a REALLY dirty way of "making this work" but it causes Angular to keep adding the <style> back into the DOM.
First, set encapsulation to ViewEncapsulation.None.
Second, create a function to generate the <style> tag the old fashion way with an id:
updateDynsmicStyleNode() {
const id = 'dynamic-css-styles';
const nativeElm = this.elmRef.nativeElement;
const existing = nativeElm.querySelector(`style#${id}`);
if (!existing) {
const styleTag = document.createElement('style');
styleTag.setAttribute('id', id);
styleTag.innerHTML = this.dynamicCSSStyles;
nativeElm.prepend(styleTag);
} else {
existing.innerHTML = this.dynamicCSSStyles;
}
}
Third, call our function in ngAfterViewChecked:
ngAfterViewChecked() {
this.updateDynsmicStyleNode();
}
I mean while this worked, it is really bad, since moving the mouse around the screen would cause Angular to just continuously reinsert the <style> tag.
Does anyone know some other way more legit to archive this? LOL
You can use ngClass or [class] attribute. Since you can have the styles ready from the component.ts file.
You can do something like this:
Way 1: If you already know what the dynamic ids might be, (like if it always will be 'hello' and 'world')
let dynamicClasses = {};
// Once you get some classes from your logic, you can add them to the object above
dynamicClasses['hello'] = 'custom-hello';
dynamicClasses['world'] = 'custom-world';
// Then in HTML
<mat-checkbox [ngClass]="dynamicClasses"></mat-checkbox>
Way 2: If you dont know what the classes also might be, like if its not always be hello or world, then create a method and call it where required, you might need to do something similar to #codenamezero said.
I have a boolean array that I am displaying in a razor foreach loop. Within the loop I am displaying the different values within the array. Is it possible,if so how, to change the css based on the value it is displaying?
For example
if (#status == true) THEN color = green; if (#status == false) THEN color = red.
If I understand your question correctly, you could add a data-attribute to the HTML element and alter the value (for example with Javascript) to/from "true/false" and use that in your CSS like so:
<element data-status="true">Content</element>
<element data-status="false">Content</element>
[data-status="true"] {
color: green;
}
[data-status="false"] {
color: red;
}
$('.test').each(function() {
if(parseInt($(this).css('font-size')) > 16) {
$(this).css('color', 'green');
}
});
.test {
font-size: 18px;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="test">Javascript manipulation: Green when largen than 16px</p>
I came across this question having the same problem, however I have implemented another solution, using c#/razor/css and no javascript. Someone might like this better.
First: define the possible values as an enumeration:
public class enum MyRateTyp{
Level1,
Level2,
Level3
}
Second:
Find a place where, given the number on which the style will be based, the conversion will take place. In my case I added an extension method to the int type.
public MyRate Evaluate(this int i)
{
MyRate answer = MyRate.Level1;
if(i<50)
{
answer = MyRate.Level1;
}
.
//All if statements here
.
if (i>100)
{
answer = MyRate.Level3;
}
return answer;
}
Third: On your .css file, define the style for each possible value, like so:
.Level1{
/*Style here for level 1*/
}
.Level2{
/* Style here for level 2*/
}
/*
Other Styles here
*/
Finally On the Razor page, assign the extension method to the css class of the element you want to change the style based on the value.
For example.
The level is <p class="#(myInt_variable.Evaluate())"> #(myInt_Variable) </p>
It is possible to change the color by putting an event on the box. This is done in javascript "AddEventListener"
I have some links in Header of my mvc project that has a styling which shows an icon by a link and add vale inside it. for example consider this code:
<span class="icon-alert-13"></span>
<span class="icon-docs"></span>documents
This is how it looks like:
I have this working with all the numbers for example if I change 13 to 18 like :icon-alert-18 it shows 18 in the icon.
This is style:
.icon-alert-18:before {
content: '\0030';
}
How I can make number part of class="icon-alert-18" as variable so I can pass value from my code and get the icon populated with the value I pass?
Also this is in Mobile development.
Let's say you have a variable called alertNumber and it holds the number you want to display in your icon.
You can fetch your icon with any of the DOM functions:
const numbersIcon = document.getElementById("numbersIcon");
Declare classes that you always want your element to have, for example:
const defaultNumbersIconClasses = "foo";
You can pass that variable to a function that changes the class of the elements like this:
function updateIconTo(number) {
numbersIcon.className = defaultNumbersIconClasses;
numbersIcon.classList.add("icon-alert-" + number);
}
The first line inside the function sets the classes of the element to the default classes you have specified.
The second one adds icon-alert- plus your number as a new class.
You can now use that function on whatever type of event you like, for example, an onclick event:
<span onclick="updateIconTo(alertNumber)" id="numbersIcon" class="icon-alert-13"></span>
Hope that helped!
I'm trying to hide certain tags by using one ID element, but seem like it only hide the first tag with the ID element that I used.
DEMO : http://jsfiddle.net/mgm3j5cd/
How can i solve this issue? I wanted to hide the tag only with the ID element that I've declared. Appreciated for helps
You have this tagged as CSS, so the following CSS in your page's stylesheet will work:
#hide {
display: none;
}
Edit:
If you must only use JavaScript, you can do the following. Keep in mind that your document is already technically invalid by having multiple elements with the same ID, so this approach may not work in every browser. (I tested with Firefox 32).
Working JSFiddle: http://jsfiddle.net/88yw7LL9/2/
function hideByID(string) {
var element = document.getElementById(string); // get first matching element
var array = [];
while(element) {
array.push(element);
element.id = string + '-processed'; // change ID so next call gets the next matching element
element = document.getElementById(string);
}
for(var i = 0; i < array.length; i++) {
array[i].id = string; // revert ID to previous state
array[i].style.display="none"; // hide
}
}
hideByID('hide');
The simplest solution should be to assign 'class' attribute to certain elements you want to hide, like :
.XXXX
{
display:none;
}
Perhaps, you want to specify some elements hidden with id, like :
#id1 , #id2
{
display:none;
}
or
div#id1 , div#id2 //more accurate
{
display:none;
}
but, unfortunately, you can't hide elements you want by using one ID.
I'm trying to navigate within a webpage that has been loaded from a remote server in my WebView control (Cocoa application). I would like to navigate to a particular tag that i can see in the HTML code of that page. The purpose of this all is to show the part of the HTML page that is of my interest at the top of the WebView control.
I know that in HTML code you can navigate by using something like #MIDDLE, #TOP etc. However, is this possible to do from outside of the HTML code using the WebView API?
Thanks for your reply in advance!
I found the answer to my question with the help of an other question (How to scroll HTML page to given anchor using jQuery or Javascript?).
The piece of code below does the trick for me. It searches for HTML elements with attribute: class = "container" in the HTML data that is loaded in the WebView component self.webView.
-(void) scrollMyImportantHTMLPartInView
{
// Get a list of HTML elements that contain attribute class = "container" (eg. <div class "container">)
DOMNodeList *nodeList = [[[self.webView mainFrame] DOMDocument] getElementsByClassName: #"container"];
if( nodeList && nodeList.length >= 1 ) {
// get the first node (class = "container") from the list
DOMNode *domNode = [nodeList item:0];
// Make sure it's a DOM element type
if( domNode.nodeType == DOM_ELEMENT_NODE ) {
// It's now save to cast from DOMNode* to DOMElement*
DOMElement* domElement = (DOMElement*) domNode;
// Scroll begining of HTML node into view
[domElement scrollIntoView: YES];
}
}
}