Hi Greg,
Thanks for contacting Syncfusion forums.
Please refer the below steps for customizing the css of Syncfusion controls.
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>
<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
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