This is a migrated thread and some comments may be shown as answers.

CssClass on RadNumericTextBox

3 Answers 327 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Veteran
Thomas asked on 26 May 2020, 08:54 AM

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

3 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 28 May 2020, 02:20 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Thomas
Top achievements
Rank 1
Veteran
answered on 29 May 2020, 08:58 AM
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 ...
0
Rumen
Telerik team
answered on 03 Jun 2020, 08:55 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
NumericTextBox
Asked by
Thomas
Top achievements
Rank 1
Veteran
Answers by
Rumen
Telerik team
Thomas
Top achievements
Rank 1
Veteran
Share this question
or