Textbox height

[Alberto Monteverdi]

Hi,

I need to set Vue ejs-textbox height.

I'd like to set the height of the control (Material css style) pixel perfect, so I don't

want to apply the attribute 'e-small' (which also doesn't work for me).

How can I do?

Thank You in advance.

Alberto.

[Ponmani Murugaiyan]

Hi Alberto, 

Thanks for contacting Syncfusion support. 

Query: I need to set Vue ejs-textbox height. 

 

By overriding the highlighted styles below, you can change the height of the textbox component. If you want to achieve a similar size to what we can achieve with the ‘e-small' class, please override the font-size, placeholder size with while focus in or focus out styles mentioned below. 

<style> 

    /* Adjust height of the textbox */ 

    .e-input-group input.e-input, 

    .e-float-input.e-input-group input, 

    .e-input-group.e-control-wrapper input.e-input, 

    .e-float-input.e-input-group.e-control-wrapper input, 

    .e-float-input input, 

    .e-float-input.e-control-wrapper input { 

    min-height: 18px; 

    } 

    /* Modify font size */ 

    .e-float-input, 

    .e-float-input.e-control-wrapper { 

    font-size: 12px; 

    } 

    /* Font size for placeholder on top */ 

    .e-float-input input:valid ~ label.e-float-text, 

    .e-float-input input ~ label.e-label-top.e-float-text, 

    .e-float-input.e-control-wrapper input:valid ~ label.e-float-text, 

    .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text { 

    font-size: 12px; 

    } 

    /* Font size for placeholder on bottom */ 

    label.e-float-text, 

    .e-float-input label.e-float-text, 

    .e-float-input.e-control-wrapper label.e-float-text, 

    .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom, 

    .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom { 

    font-size: 12px; 

    } 

</style> 

 

 

Sample: https://codesandbox.io/s/syncufsion-v18-dropdown-forked-hg6ew 

 

Please get back us if you need further assistance. 

Regards, 

Ponmani M

[Alberto Monteverdi]

Hi Ponmani,

Thank You, it works fine.

But what happens for the same thing for:

ejs-numerictextbox and ejs-datepicker

where close to the input field are decrement value, increment value, calendar icons

that prevent shrinking the input field ?

Maybe also do You have to resize them ?

How can I do ?

Thank You.

Alberto.

[Ponmani Murugaiyan]

Hi Alberto, 

Thanks for the update. 

Query: But what happens for the same thing for ejs-numerictextbox. 

Yes, you need to adjust the width and height of the increment and decrement icon in order to get the input size to be decreased as expected. 

<style> 

    /* Adjust height of the Numeric textbox */  

    .e-input-group input.e-input, 

    .e-input-group.e-control-wrapper input.e-input { 

      min-height: 18px; 

    } 

    /* Modify font size */  

    .e-input-group, 

    .e-input-group.e-control-wrapper { 

      font-size: 12px; 

    } 

    /* Modify width and height of increment and decrement icon  */  

    .e-input-group .e-input-group-icon, 

    .e-input-group.e-control-wrapper .e-input-group-icon { 

      min-height: 16px; 

      min-width: 16px; 

    } 

    .e-numeric.e-control-wrapper.e-input-group .e-input-group-icon { 

      font-size: 11px; 

    } 

</style> 

NumericTextbox sample: https://codesandbox.io/s/syncufsion-v18-dropdown-forked-5vpzt 

Query2: But what happens for the same thing for ejs- datepicker. 

Yes, you need to adjust the height and width of the calendar icon in order to reduce the input size.               

<style> 

    /* Adjust height of the datepicker */ 

    .e-input-group input.e-input, 

    .e-input-group.e-control-wrapper input.e-input { 

       min-height: 18px; 

    } 

    /* Modify font size */ 

    .e-input-group, 

    .e-input-group.e-control-wrapper { 

       font-size: 12px; 

    } 

    /* Modify width, height and font-size of calendar icon  */  

    .e-input-group-icon.e-date-icon, 

    .e-control-wrapper .e-input-group-icon.e-date-icon { 

       min-height: 16px; 

       min-width: 16px; 

       font-size: 14px; 

    } 

</style> 

DatePicker Sample: https://codesandbox.io/s/syncufsion-v18-dropdown-forked-wctwz?file=/src/App.vue 

Please get back us if you need further assistance. 

Regards, 

Ponmani M 

[Alberto Monteverdi]

Hi Ponmani,

Thank You !!!

It works fine, but one more thing I miss to ask You:

How to resize the clear input icon near the calendar icon in datepicker ?

[Ponmani Murugaiyan]

Hi Alberto, 

Thanks for the update. 

Query: How to resize the clear input icon near the calendar icon in datepicker ? 

 

You can customize the clear icon in DatePicker component by overriding the highlighted below styles. 

/* Adjust height and width of clear icon */ 

.e-input-group .e-clear-icon, 

.e-input-group.e-control-wrapper .e-clear-icon.e-input-group .e-clear-icon, 

.e-input-group.e-control-wrapper .e-clear-icon { 

  min-height: 16px; 

  min-width: 16px; 

} 

/* Adjust font size of clear icon */ 

.e-input-group .e-clear-icon::before, 

.e-input-group.e-control-wrapper .e-clear-icon::before { 

  font-size: 10px; 

} 

 

Sample: https://codesandbox.io/s/syncufsion-v18-dropdown-forked-x3rhm 

Regards, 

Ponmani M 

[Alberto Monteverdi]

Hi Ponmani,

It works very well, thank You for your help.

Kind Regards.

Alberto.

[Ponmani Murugaiyan]

Hi Alberto, 

Most welcome. We always happy to assist you.  

Regards, 

Ponmani M