CssClass on RadNumericTextBox

[Thomas]

Hi, I want to move my styles to a css class:

 

From:

<EnabledStyle BorderColor="#e0e0e0" BorderWidth="1" Width="48" Height="36px" HorizontalAlign="Center" />

To:

<EnabledStyle CssClass="my-class" />

    .my-class {
        border: 12px solid #e0e0e0; 
        width: 48px; 
        height: 36px;
        text-align: center;
    }

But that is not working, the NumericTextbox never gets styled ....

Please enlightenme what I have to do to make it work, thank you!

Tom

[Rumen]

Hi Tom,

Please apply the !important rule and it will start to work as expected;

        <style>
            .my-class {
                border: 12px solid #e0e0e0 !important;
                width: 48px !important;
                height: 36px !important;
                text-align: center;
            }
        </style>
        <telerik:RadNumericTextBox RenderMode="Lightweight" runat="server" ID="RadNumericTextBox2" Width="190px" Value="10" EmptyMessage="Enter unit price" Type="Currency" MinValue="0">
            <EnabledStyle CssClass="my-class" />
        </telerik:RadNumericTextBox>

 

 

Regards,
Rumen
Progress Telerik

[Thomas]

Hi Rumen, that does style the box to the right hight and width, but brakes the layout .... it now moves to the left, the parent container takes the whole width ...

[Rumen]

Hi Thomas,

This was an example of how to apply the class property and that it gets applied to the input HTML element.

My advice for you is to use the DevTools toolbar to inspect the generated markup and see the applied CSS classes to get a better overview of what is happening so that you customize the class to match your desired customization appearance:

 

If you need assistance, please provide a screenshot showing the desired appearance you'd like to achieve.

 

Regards,
Rumen
Progress Telerik