How can we change the colour of a numeric textbox at runtime
The colour of text should be red if value is less than zero else colour should be blue
Without trying it before i answer.
First make a variable called "numberColor" on Load event of page and set it to "(0, 0, 0)". <- black
Set the Color property in Styletab on numeric to ${numberColor}
You can use the "Change" event on the Numeric component to then change to color,
args in this case is what number the user typ in the numeric component.
2 Likes
In combination with what @Gottegubben said you may also have to add the following CSS otherwise the color attribute won't propagate to the <input> element of the Numeric component:
.rz-spinner-input {
color: inherit;
}
1 Like
You need @() for complex expressions
1 Like
I tried by directly setting the RGB value from design mode but the text color is not displayed at run/design
What am I missing? Kindly guide
Did you add the CSS that I mentioned? Without it the color CSS attribute may not apply. You can inspect the CSS of the RadzenNumeric with your browser's developer tools to see what rules are applied.
1 Like
Sorry, missed that part.
My Bad! Updating the style.css resolved the color applying issue.
but
and also
gives the same error and does not compile
Kindly advise
In Radzen you should set the color as a custom style attribute:
The actual value is color:${value == 0 ?"red":"green"}
This generates the following code which works as expected:
style=@($"width: 150px;color:{(value == 0 ?"red":"green")}")
It relies on C# string interpolation to avoid the Blazor error about mixed content.
1 Like