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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

127641 Nov 30,2016 04:25 AM UTC Jan 20,2017 01:07 PM UTC ASP.NET MVC 5
loading
Tags: General
R Brian Lindahl
Asked On November 30, 2016 04:25 AM UTC

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 [Syncfusion]
Replied On December 1, 2016 11:25 AM UTC

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,  
 
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 “CssClassproperty. To know more about how to customize the Essential JS controls with user-defined styles, please refer to the below link:  
   
Regards, 
Francis Paul A. 


R Brian Lindahl
Replied On December 1, 2016 09:18 PM UTC

Thanks, that worked great.

Francis Paul Antony Raj [Syncfusion]
Replied On December 2, 2016 05:01 AM UTC

Hi Brian, 
 
Thanks for the update. 
Please let us know if you need further assistance. 
 
Regards, 
Francis Paul A. 


R Brian Lindahl
Replied On January 19, 2017 04:41 PM UTC

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 [Syncfusion]
Replied On January 20, 2017 01:07 PM UTC

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.  
  
 
Please let us know if you need further assistance on this.  
Regards,  
Ashokkumar B  


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

;