Styling RadzenNumeric

Radzen.Blazor Components
1

Hello,

I've tried adding a class and style= css + Style = css .. the RadzenNumeric field in question doesn't display x-large font. All input elements are displaying x-large to support working in potentially direct sun light, but the RadzenNumeric displays like 12px font, compared to the others using 24px font.

How do I apply the font-size css to RadzenNumeric - or do I need to set a different css-property?

2

Check the rendered HTML - RadzenNumeric outputs a span with an input inside of it. Try setting the --rz-input-font-size CSS variable instead:

<RadzenNumeric style="--rz-input-font-size: 24px" />
3

Hello @korchev

Im trying to add the text decoration to an RadzenNumeric:

text-decoration: line-through!important;

But the <input> element does not seem to inhirit it from the <span> element. Is there some other way to work around this?

Or would i have to create a custom css class which does the work for me? This would though, not be compatible with future updates which changes the structure of the RadzenNumeric.

Thanks in advance.

Regards
Ole

4

Hey @olefosdal,

You have plenty of options to style the input:

  • CSS cascading to rz-spinner input
  • Use directly the applied CSS classes to the input:
    image
    image1920×1080 224 KB
  • InputAttributes to apply whatever attribute your need to the input:
    InputAttributes
5

Thanks alot. Did even find this is the github docs, but missed how to implement it.