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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

127641 Nov 29,2016 11:25 PM Jan 20,2017 08:07 AM ASP.NET MVC 5
loading
Tags: General
R Brian Lindahl
Asked On November 29, 2016 11:25 PM

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 06:25 AM

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 04:18 PM

Thanks, that worked great.

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

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 11:41 AM

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 08:07 AM

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.

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.

;