I have a very general web page where I display information. I have this code in my .cshtml:
<div style="text-align: left">
Test <p style="color: #1e83ca;"> #Html.Label(Model.MemberName) </p>
Beruf #Html.Label(Model.ProfessionName)
Datum #Html.Label(Model.TestTakenDate.ToString())
</div>
I want differentiate the text that I display reading from the database from what is the fixed text. I am using the helper Label and there is no difference. I get all black text. How do I make only what is in the #Html.label in different color? OR what else can I use to make them look different.
I just did the following and it worked for me:
#Html.Label("This is a label", new { style = "color:#ff0000"})
As mentioned in my comments, try to use <span>. That will work !
#Html.Label(Model.ProfessionName, new {#class = "mylabel" })
in css
.mylabel
{
color: green;
}
Try giving your #Html.Label classes.
so in your css :
.database { color: #1e83ca; }
and in your cshtml
#Html.Label(Model.MemberName, new { #class = "database"} )
Can you specify the HTML attributes by supplying an additional parameter to the Label HTMLHelper?
Something like:
<%= Html.Label("This is a label", new { style : "color:#FF0000;" } ) %>
Related
I have been working on this piece of code for like two days now. I am using Angular to create a web app, and I need some numbers to change color when they reach a certain value. (EXAMPLE: if num > 45 color = green else color = red) I would like to be able to pass the value of color between my typescript and HTML, but I'm having trouble with that. The color value passes to HTML just fine, but I can't put the color value into any type of style.
Here is my code. Thanks for the help!
Typescript:
colorOption=''
if(this.Classyaverage > 45){
console.log('red')
this.colorOption='#FF0000'
}
else{
console.log('green')
this.colorOption='#00FF00'
}
HTML:
<body>
<div class="pagecolor">
<div class="box">
<canvas class="offset"
id="lineChart"
width="240"
height="180"
>
</canvas>
//This is what I want...
<style>
h1{ color:{{colorOption}};}
</style>
<h1>
{{Classyaverage}}
</h1>
</div>
</div>
</body>
So is I can't import a Typescript like that, is it possible to export HTML or CSS into typescript?
Create a css class where you will apply the color:
.myColor {
color: var(--colorVariable);
}
Assign the value of the css variable from the typescript according to what you need in this way:
document.documentElement.style.setProperty( '--colorVariable', '#00FF00' );
You can modify it from any calculation or event of the application.
To achieve expected result, use ngStyle on h1 tag (https://angular.io/api/common/NgStyle)
<h1 [ngStyle]="{'color': colorOption}">
{{Classyaverage}}
</h1>
I think what you are looking for is the ngClass directive.
Here is the documentation from Angular. https://campuslabs.visualstudio.com/Student%20Assessment/_workitems/edit/59235
// .css
.red{
color: #f00;
}
.green: {
color: #0f0
}
-
// .html
<h1 [ngClass]="{'red': Classyaverage > 45, 'green': Classyaverage <= 45}"></h1>
This might be more than you need, but if you wanted to style multiple elements (such as all of a class or tag name) you could do the following.
HTML:
<h1 class="color-change">
{{Classyaverage}}
</h1>
<h2 class="color-change" *ngFor"let el of arr">
test
</h2>
TypeScript:
#ViewChildren(".color-change") private colorChange: QueryList<ElementRef>;
constructor(private renderer: Renderer2) { }
ngAfterViewInit(): void {
this.colorChange.subscribe(() =>
this.colorChange.forEach((element: ElementRef) => {
this.renderer.setStyle(
element.nativeElement,
'color',
this.colorOption
})
})
);
}
...
This would take care of multiple elements as well as asynchronous elements
I am working with a Web Form (html) and a CSS file and I wanna know what do I need to write in the CSS to make an action on one class or id- affect an other class or id. For example: I have a
<p class="hh">
Hello!
</p>
(^^ this p tag's class is "hh")
And another one:
<p class="gb">
Goodbye!
</p>
(^^ this p tag's class is "gb")
I wanna write something in the CSS file so that whenever I click on whatever there is in the "hh" class, it will make something change in the "gb" class, so if I click on the text "Hello!" it will make the color of the text "Goodbye!" green. Please help me! I try to find out how to do it for a long long time...
Thank you!
This sounds more like you need a javascript solution. In general you are not really able to change something on a click event in CSS. Consider following solution:
const hh = document.getElementById("hh");
const gb = document.getElementById("gb");
hh.addEventListener("click", function() {
gb.style.color = "green";
});
gb.addEventListener("click", function() {
hh.style.color = "red";
});
<div id="hh">
Hello!
</div>
<div id="gb">
Goodbye!
</div>
A common practice for doing this is by using JavaScript, which is known as the programming language of the web. If you've never used JavaScript before it can be a little bit confusing but if you have experience in other general purpose programming languages such as Python or Java then it shouldn't take much time to pick up.
To do what you are asking, there are a few possible ways to do this. I will share what I believe to be the most simple although not the most robust. You can use JavaScript events to fire off certain functions when certain particular things happen to your elements. For example, you can modify your HTML like so:
<p class="hh" onclick="doSomething()">Hello!</p>
Then, either in a separate JavaScript file linked back to your html file or in the of your html file, you would define the doSomething() function:
function doSomething(){
document.getElementsByClassName("gb")...
}
The document.getElementsByClassName() function is one way to select HTML elements from a page and modify it via JavaScript, I suggest checking out the very good JavaScript tutorials on W3Schools for more and better ways to do this, but this is the general principal. You would then modify the HTML element any way you need to.
Hope this helps!
You need to do that using JavaScript. I have attached a example for that.
$(".one").on('click', function() {
$(".two").css('color', 'red');
})
.one{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="one"> Change below text to RED </p>
<p class="two"> Black text </p>
There is a way to use a :focus state to change the look of parents, but it wouldn't be possible to differentiate between which click caused the parent to focus.
Here's a simple example using JavaScript and jQuery.
var helloEls = document.querySelectorAll('#jsTest .hh');
var goodbyeEls = document.querySelectorAll('#jsTest .gb');
helloEls.forEach(function(elem) {
elem.addEventListener("click", function() {
goodbyeEls.forEach(function(el) {
if (el.className==='gb active'){
el.className = 'gb';
} else {
el.className = 'gb active';
}
});
});
});
var gbEls = $('#jqueryTest .gb');
$('#jqueryTest .hh').click(function(){
if (gbEls.hasClass('active')){
gbEls.removeClass('active');
} else {
gbEls.addClass('active');
}
});
.gb.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jsTest">
<p class="hh">
Hello!
</p>
<p class="gb">
Goodbye!
</p>
</div>
<div id="jqueryTest">
<p class="hh">
Hello!
</p>
<p class="gb">
Goodbye!
</p>
</div>
I'm trying to add a font awesome icon into a kendo UI ASP.NET Menu. Unfortunately I can't find an example at Kendo on how to do it. The code is as follows:
#(Html.Kendo().Menu()
.Name("PreferencesMenu")
.HtmlAttributes(new { style = "width: 125px; height:900px; border:0px;" })
.Direction("down")
.Orientation(MenuOrientation.Vertical)
.Items(items =>
{
items.Add()
.Text("Account");
items.Add()
.Text("Notification")
.Items(children =>
{
children.Add().Text("Email");
});
items.Add()
.Text("Theme");
})
)
Does anyone know how I could add a font-awesome icon before the .Text("Account"); ?
This seemed to work for me with a sample project.
If you change the .Text("Account")
To this
.Text("<span class=\"fa fa-arrow-up\"></span> Account").Encoded(false)
That should then show an arrow up next to Account. (Obviously change the Font Awesome element to one that you want.
edit: I have added the following sample for you showing this working at multiple levels and adding the font's at the child level
#(Html.Kendo()
.Menu()
.Name("men")
.Items(item =>
{
item.Add()
.Text("<span class=\"glyphicons glyphicons-ok\"> </span>some item")
.Items(i =>
{
i.Add().Text("<span class=\"glyphicons glyphicons-plus\"></span> Hello").Encoded(false);
}
)
.Encoded(false);
item.Add()
.Text("<span class=\"glyphicons glyphicons-thumbs-up\"> </span>some item")
.Items(i =>
{
i.Add().Text("Hello");
})
.Encoded(false);
})
)
The reason for setting .Encoded(false) is so that the rendering engine just passes the data and assumes it is safe code to write out it is the equivalent of doing
#Html.Raw("<p> some html here</p>")
By setting it to true the system just treats the incoming text as a string and doesn't try to interpret the text and then apply any "html/javascript" recognition eg. <p>I'm a paragraph</p> if encoding is set to true would render out as <p>I'm a paragraph</p> if false would give you the I'm a paragraph as it's own paragraph and the markup would be applied to the page.
How to change text area width in ASP.NET MVC View? I read questions about this problem here, but nothing helped.
#Html.TextAreaFor(m => m.Suggestions, new { #class = "text-area", placeholder = "Unesite svoje prijedloge..." })
CSS:
.text-area {
width:50%;
height:100px;
color:#3A3A3A;
font-weight:bold;
font-style:italic;
}
All styles are applied except this for text area width.
I also tried this:
#Html.TextAreaFor(m => m.Suggestions, new { rows = "7", cols = "70", #class = "text-area", placeholder = "Unesite svoje prijedloge..." })
But no result.
Open developer tools and find the input element in your browser. Look to see if there is a max-width property set on your TextArea element. If so then all you need to do is us the following code to overwrite it.
-- You can use this code if you are only binding a single model to your view
#Html.TextArea("NameOfElement", Model.propertyName, new {style = "max-width:100% !important;"})
--- OR ---
--- Use this code is you are binding a model from a list of models
#Html.TextAreaFor(m => m.propertyName, new {style="max-width:100%", #id = "ElementId"})
Note:
1) If you use the above value for the max width it will inherit from the parent container.
2) The first parameter in the TextArea help is the name of the element. It also assigns the name as the elementID. In the TextAreaFor you have to explicitly assign the elementID as shown above.
HTML:
<form id="myform">
<textarea value="">
</textarea>
</form>
CSS:
#myform textarea{
Width: 50%;
height: 100px;
}
Try using form-control-full property:
#Html.TextAreaFor(model => model.Value, new { #class = "form-control form-control-full", rows = 8})
I found this:
in site.css line 19
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
remove textarea in this.
I am struggling to change the font size for MVC TextBoxFor?
I can change the font size when using:
input, textarea {}
But this changes all my input size's. I also tried to then add a css class to my TextboxFor:
#Html.EditorFor(model => model.UserName, new { #Class = "Mytextarea" })
css
.Mytextarea {
font-size: 0.85em !important;
height: 14px !important;
color: #333 !important;
/*font-family: inherit;*/
width: 300px;
}
This has had no affect.
My TextBoxFor's are huge and bulky and i have no way to change them, If possible i would like to set styling to change them all at once.
Edit:
So, you start your question off asking about TextBoxFor, but your actual code references EditorFor.
When using the EditorFor extension, you need to write a custom editor template to describe the visual components. If you don't, it will use the default template, which is where "text-box single-line" is coming from.
See this answer for a quick explanation on how to build a template that you can assign to the EditorFor helper. Or just use TextBoxFor like this.
#Html.TextBoxFor(model => model.UserName, new { #Class = "Mytextarea" })