We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

108727 May 9,2013 01:37 AM UTC Aug 6,2013 07:13 AM UTC ASP.NET MVC (Classic) 3
loading
Tags: Tools
Greg Quinn
Asked On May 9, 2013 01:37 AM UTC

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 [Syncfusion]
Replied On May 14, 2013 05:29 AM UTC

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
Replied On July 31, 2013 01:41 PM UTC

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 [Syncfusion]
Replied On August 6, 2013 07:13 AM UTC

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;