How can I use ng-class or/and ng-if to get the 3 Div lines down to one line? Each line is showing the same value but depending on what range it falls in I would like to color the text a certain color.
<div class="contents">
<div ng-if="model.DeviceStatus.Data1 <= 24" style="color:green;">{{model.DeviceStatus.Data1}}℃</div>
<div ng-if="model.DeviceStatus.Data1 > 24 && model.DeviceStatus.Data1 <= 35" style="color:Orange;">{{model.DeviceStatus.Data1}}℃</div>
<div ng-if="model.DeviceStatus.Data1 > 35" style="color:red;">{{model.DeviceStatus.Data1}}℃</div>
</div>
Try this:
ng-class="{someColor: model.DeviceStatus.Data1 <= 24, anotherColor: model.DeviceStatus.Data1 > 24}"
You will need to creat those classes as well
.someColor {
color: green; // etc
}
Alternatively you could use an object and ng-style
hope this helps
Related
I am trying to add text after each numerical weight value.
Here's what the html looks like:
<table class="shop_attributes">
<div class="field" data-field-id="product_size">
<strong class="field__label field__label--above">product_size</strong>
<div class="field__content">
<p>66 x 81 x 61</p>
</div>
</div>
<div class="field" data-field-id="product_weight">
<strong class="field__label field__label--above">product_weight</strong>
<div class="field__content">
<p>128</p>
</div>
</div>
</table>
The results I want to display is:
product_size
66 x 81 x 61 in
product_weight
128 lbs
From what I know, we can select the data field using
div[data-field-id=product_size]
div[data-field-id=product_weight]
And we can use > p to select just the p elements under the data fields.
This is what I've done
div[data-field-id="product_weight"] > p{
white-space: nowrap;
content: " lbs";
}
However this does not work. What am I doing wrong?
Hello dear I have read your problem carefully, after that I have solved your problem which I have attached as below code.
div[data-field-id="product_size"] > div > p::after {
content: " in";
}
div[data-field-id="product_weight"] > div > p::after {
content: " lbs";
}
I hope my solution will solve your problem.
Note:- If you want to add content after and before any element then you need to use CSS Pseudo-elements (like ::after and ::before)
I am trying to inspect an element and I have used css selector
Here's the HTML
<div class="MuiPaper-root MuiPaper-elevation0 jss325 MuiPaper-rounded">
<div class="MuiPaper-root MuiPaper-elevation1 jss329 MuiPaper-rounded" style="text-align: right;">
<div class="MuiGrid-root MuiGrid-container">
<div class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-2" style="margin-top: 14px; padding-right: 10px;"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation" style="cursor: pointer;"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg></div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-9" style="margin-top: 10px;"><span class="MuiTypography-root jss330 MuiTypography-body1">الرقم الآلي للوحدة 10670235</span><br><span class="MuiTypography-root jss331 MuiTypography-body1">العديلية - قطعة 3 - شارع عيسى عبد الرحمن العسعوسي - قسيمة 129 - منزل 19 - الدور الأرضي - الرقم الآلي للوحدة 10670235</span></div>
</div>
<hr class="MuiDivider-root" style="margin-right: 30px; margin-left: 30px;">
</div>
</div>
I have tried the following css selector span.MuiTypography-root but I found multiple instances. How can I get the desired one only?
The desired text is after the element MuiTypography-root jss331 MuiTypography-body1
I can't use this jss331 as this is created dynamically
You can add more specifiers by just chaining:
span.MuiTypography-root.jss331
This will get any span with classes MuiTypography-root and jss331.
You can chain more as needed.
PS: you can test out selectors by hitting ctrl + f while inspecting the elements. You can type in text to find, CSS selectors, and XPath if I remember correctly
Edit: if a class is dynamic then we have to go by what we know is consistent. If we can assume it will always be the last-child then you can use span.MuiTypography-root:last-child
Or if it's always the third child then span.MuiTypography-root:nth-child(3)
Or (if it's always the second span with the MuiTypography-root class) in whatever app you're using selenium, you can use the find_elements_by_css_selector method, which returns an array, and access the second element found.
So you want to inspect this one MuiTypography-root jss331 MuiTypography-body1
Did you tried this:-
span.MuiTypography-root:last-child{
border: 1px solid;
background-color: gold;
}
I have the following HTML markup in my .NET MVC project:
<div class="row">
<div class="span6">#Model.Data</div>
<div class="span6">#Model.OtherData</div>
</div>
I'm getting data from server. So I want to do the following:
If data is empty then show other data with width = 100%.
Just to clarify I want to do something like that:
<div class="row">
<div class="span12">#Model.OtherData</div>
</div>
Or vice versa.
Is there a way to do that? Maybe with using different HTML tags / CSS classes.
Essentially you just want conditionally display the #Model.Data only if it isn't null. You can also set the col class with a variable, and conditionally change that variable depending if #Model.Data exists or not. Try something like this:
# {
var colClass = 'span6';
if (#Model.Data == null) {
colClass = 'span12';
}
}
<div class="row">
#if (#Model.Data != null) {
<div class="#colClass">#Model.Data</div>
}
<div class="#colClass">#Model.OtherData</div>
</div>
I have a bunch of div elements whose background color has to be set according to data from the angular component.For example, if the data is 0.5 and below, it should be green and so on.For that, the data(s.score) is available in the HTML template.But I need a way to pass this data as a parameter to a function which should be invoked on a load of this div.The class name of div elements is "card"
Here is my div structure:
<div *ngFor="let s of res1 let i=index" style="display:inline-block;padding:10px;" [dragula]='"bag-task1"'>
<div class="container">
<div class="card" id="{{'card_'+i}}" #cardDiv (click)="flip(cardDiv.id,$event)" >
<div class="front">
<div style="border:1px solid white;text:white">
<h3>{{s.Unit}}</h3>
</div>
<div style="display:inline-block">
<div style="display:inline-block"> <img src="./assets/O2.png" style="width:40px;height:40px;float:left;border:0px"/>
<h3 style="margin-left:40px;width:30px">{{s.sao2}}</h3></div>
<div style="display:inline-block">
<img src="./assets/bp_icon.png" style="width:40px;height:40px;float:left;border:0px"/>
<h3 style="float:right;margin-left:20px;width:30px">{{s.systemicmean}}</h3></div>
</div>
</div>
</div>
Any help is much appreciated.
Thanks in Advance.
Supraja
Why don't you just create a public function in your component, that returns a string class name (or if you want to do it dirty, a hex color code that you could use in a background-color style attribute?
https://stackblitz.com/edit/angular-qflqpp?file=app%2Fapp.component.ts
getBackgroundClass(s: Element): string {
if (s.score < 0.5) {
return 'green';
}
return 'red';
}
While Microsoft has created some automagic rendering of html attributes in razor MVC4, it took me quite some time to find out how to render a second css class on an element, based on a conditional razor expression. I would like to share it with you.
Based on a model property #Model.Details, I want to show or hide a list item. If there are details, a div should be shown, otherwise, it should be hidden. Using jQuery, all I need to do is add a class show or hide, respectively. For other purposes, I also want to add another class, "details". So, my mark-up should be:
<div class="details show">[Details]</div> or <div class="details hide">[Details]</div>
Below, I show some failed attempts (resulting mark-up assuming there are no details).
This: <div #(#Model.Details.Count > 0 ? "class=details show" : "class=details hide")>,
will render this: <div class="details" hide="">.
This: <div #(#Model.Details.Count > 0 ? "class=\"details show\"" : "class=\"details hide\"")>.
will render this: <div class=""details" hide"="">.
This: <div #(#Model.Details.Count > 0 ? "class='details show'" : "class='details hide'")>
will render this: <div class="'details" hide'="">.
None of these are correct mark-up.
I believe that there can still be and valid logic on views. But for this kind of things I agree with #BigMike, it is better placed on the model. Having said that the problem can be solved in three ways:
Your answer (assuming this works, I haven't tried this):
<div class="details #(#Model.Details.Count > 0 ? "show" : "hide")">
Second option:
#if (Model.Details.Count > 0) {
<div class="details show">
}
else {
<div class="details hide">
}
Third option:
<div class="#("details " + (Model.Details.Count>0 ? "show" : "hide"))">
This:
<div class="details #(Model.Details.Count > 0 ? "show" : "hide")">
will render this:
<div class="details hide">
and is the mark-up I want.
You can add property to your model as follows:
public string DetailsClass { get { return Details.Count > 0 ? "show" : "hide" } }
and then your view will be simpler and will contain no logic at all:
<div class="details #Model.DetailsClass"/>
This will work even with many classes and will not render class if it is null:
<div class="#Model.Class1 #Model.Class2"/>
with 2 not null properties will render:
<div class="class1 class2"/>
if class1 is null
<div class=" class2"/>
You can use String.Format function to add second class based on condition:
<div class="#String.Format("details {0}", Details.Count > 0 ? "show" : "hide")">
A more reusable approach inside your Razor code:
#functions {
public static string Displayed(int count)
{
return count > 0 ? "show" : "hide";
}
}
Using it:
<div class="#Displayed(Details.count)">Details content</div>
Which you can reuse anywhere in your code.