How do I make a simple CSS change to a NumericTextBox ?

[Greg Quinn]

I am trying to add the following simple CSS to a NumericTextBox...

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

border:2px solid #98ca3b;

Can you please explain step by step the best way to add this custom CSS to this control.

After looking for 30 minutes.. I cannot find in the heaps of CSS files where this should go.

Can you also tell me where I find the colours set by the theme in the CSS?

[Meena]

Hi Greg,

 

Thanks for contacting Syncfusion forums.

 

Please refer the below steps for customizing the css of Syncfusion controls.

 

1. Download a theme css from the below link. (ThemeStudio ->Gallery-> Select any theme ->Download the css)

               http://mvc.syncfusion.com/ThemeStudio/

     2.       Add the downloaded css file into your application.

 

     3.       Refer that css in your application. Please refer the below code snippet,

 <code>

           @(Html.Syncfusion().StyleManager().Combine(true).Minify(true)

           .Register(component =>

            {

                component.Add("~/Content/Site.css");

                component.Add("~/Content/CustomSkin.css");

              

            }))

</code>

     4.       Add the CssClass API to the control. Please refer the below code snippet,               (Note: For other controls, the API is named as CustomCss)

                <code>

                      @Html.Syncfusion().NumericTextBox("numeric").CssClass("custom")

               </code>

 

Here “custom” is the root css class name. You can have any name for this and the same name should be followed for root css. Please refer the below code snippet,

 

<code>

         .sf-editor.custom {

             display: inline-block;

            -webkit-border-radius: 5px;

            -moz-border-radius: 5px;

             border-radius: 5px;

             border:2px solid #98ca3b;

         }

 

</code>

 

            Note: Theme name is replaced with custom name here.

 

    5.  Now, you can customize the css as you wish.

 

We have prepared a simple sample with NumericTextbox customcss for your convenience and it can be downloaded from the below link

 

Kindly have a look at the sample and let us know if it helps.

 

Regards,

Meena

F108727_NumericCustomCss_91396edd.zip

[Johan Jacobs]

Hi,

I tried to customize the height and width of a NumericTextBox via CSS as per your instructions but it does not work.

Some code snippets :

in layout.html (this is the parent view of my app) I do the following...

@{

Html.Syncfusion().StyleManager().Combine(true).Minify(true)

   .Register(s =>

   {

    s.Add("~/Content/Site.css");

   s.Add(ComponentType.Grid);

   s.Add(ComponentType.NumericTextBox);

   s.Add(ComponentType.Dialog);

   s.Add(ComponentType.Accordion);

   }).Render();

}

the CSS markup that I use is called customNumericTextBox and is situated in Site.css :

.sf-editor.customNumericTextBox{

width: 100px;

height: 20px;

}

In my view I use :

@Html.Syncfusion().NumericTextBox("invoicePrintQty").CustomCSS("customNumericTextBox").Value(1).MinValue(1).MaxValue(10)

I have added 2 screenshots showing the numeric textbox without and with using CustomCSS.

I first thought that the problem could be that I have 

    Layout = null 

in my view (see screenshot) but then it would be impossible to render the numeric textbox in the first screenshot.

So please advise what am I doing wrong ?

Thanks !

Kind Regards,

Johan

support_3f7b5dd6.zip

[Meena]

Hi Johan,

 

Thanks for the update.

 

Query1: Customizing Height and Width

 

Your requirement of customizing the Height and Width of NumericTextBox can be achieved using the below code snippet,

 

<code>

@Html.Syncfusion().NumericTextBox("numeric", new { @Style = "height: 25px; width: 100px;" }).CustomCSS("custom")

</code>

 

Query2: NumericTextBox without spin buttons.

 

While applying custom css to the control, resources like images will not be loaded from theme. We need to add the images in local and specify the image url correctly. Please refer the below code snippet,

 

<code>

.sf-editor.custom .button {

  border-left: 1px solid #98ca3b;

  background-color: white;

}

 

 

.sf-editor.custom .BtnSplitUp,

.sf-editor.custom .BtnSplitDown

{

  background: url("../../Content/Images/ui-icon.png") 0 50% repeat-x;

  background-color: white;

}

 

</code>

 

We have added all necessary css classes for NumericTextBox control in Site.css for your convenience in the previous sample and it can be downloaded from the below link.

 

Kindly have a look at the sample and let us know if you have any other concerns.

 

Regards,

Meena

F108727_NumericCustomCss_19e770a8.zip