Can an input be customized with a different font and/or font-size?

[R Brian Lindahl]

I'd like one particular DatePicker to be larger than other inputs on the page.  I tried setting a CssClass on the DatePicker, but that sets a class on the span that contains the input, not on the input itself, which has the e-input class. Of course, if I override that class, it'd affect all inputs on the page, which isn't going to work.

[Francis Paul Antony Raj]

Hi Brian, 

 

Thanks for contacting Syncfusion Support. 

 

Yes, we can customize the DatePicker calendar’s (also input field’s) font (and/or) font-size by overriding the existing classes of DatePicker utilizing the property ‘CssClass’. Also, DatePicker’s input field size can be modified using ‘height’ and ‘width’ property. Please refer the below code example to customize the DatePicker widget. 

 

[cshtml] 

@Html.EJ().DatePicker("datepick").CssClass("customClass1").Height("60px").Width("250px") 

 

[style] 

      .customClass1.e-datepicker.e-calendar {         

        width: 26em; /*change the width of the calendar along with table cells*/ 

        font-family: "Comic Sans MS"; /*change the calendar font-family*/ 

        font-size: 16px; /*change the calendar font-size*/ 

      }      

      .customClass1 .e-datepicker.e-input  { 

        font-family: "Comic Sans MS"; /*change the text box font-family*/ 

        font-size: 16px; /*change the text box font-size*/ 

      } 

 

 

For your convenience, we have attached the sample in the JSPlayground,  

http://jsplayground.syncfusion.com/necxmo33 

 

In the attached sample, customClass1 added at the root element of the widget. Traversing from root element to the required sub-element, you can change the predefined styles with user-defined styles by overriding it.  

   

In this manner, you can customize the applicable Essential JS widgets appearance by applying the user defined custom styles using “CssClass” property. To know more about how to customize the Essential JS controls with user-defined styles, please refer to the below link:  

http://help.syncfusion.com/js/theming-in-essential-javascript-components#customizing-themes  

   

Regards, 

Francis Paul A. 

[R Brian Lindahl]

Thanks, that worked great.

[Francis Paul Antony Raj]

Hi Brian, 

 

Thanks for the update. 

Please let us know if you need further assistance. 

 

Regards, 

Francis Paul A. 

[R Brian Lindahl]

I'm trying to do the same thing with a NumericTextbox - however, I think I'm having trouble finding the right names to use. I did a style like:

.bigStarter .e-numerictextbox.e-input {
    font-size: 24px;
    color:darkgreen;
}

but it's not getting applied to the control. I searched the ej css file for ".e-numerictextbox", and didn't find anything. there are entries for ".e-numeric", but that's not the style name that I see in the rendered HTML.

[Ashokkumar Balasubramanian]

Hi Brian,  

  

We have analyzed your query (“Can a Numeric Textbox input be customized with a different font and/or font-size?”) and provided code blocks. From that code block, you have apply the style to hidden Input. You need to apply the styles to Numeric Textbox element,   

  

Please refer the below code snippet.  

  

Note: “e-numeric” class is in numeric text wrapper element  

 

[CSHTML]  

@Html.EJ().NumericTextbox ("numeric").CssClass("bigStarter1").Height("70px").Width("300px")  

 

[STYLES]  

    .bigStarter1.e-numeric .e-input  {  

        color: darkgreen;  

        font-size: 24px;  

      }  

 

  

For your convenience, we have prepared the simple sample, it can be downloaded in below location.  

  

Sample   

  

To know more details about the Numeric Textbox customization, please refer the below help document.  

  

https://help.syncfusion.com/aspnetmvc/numerictextbox/behavior-settings#appearance  

 

Please let us know if you need further assistance on this.  

Regards,  

Ashokkumar B