Reduce height of Calender Image In Datepicker

[Amit Kumar]

Hi
 I want to reduce height of Date-picker icon How can i reduce height of Date-picker?


Thank you
Amitkumar

[Dimo]

Hi Amitkumar,

Here is a simple demo, which shows how to decrease the height of the DatePicker and the size of the DatePicker icon.

<input type="date" id="datepicker" />

$("#datepicker").kendoDatePicker();

.k-i-calendar {
    width: 10px;
    height: 10px;
    background: red;
    margin: 0 3px;
}

.k-picker-wrap .k-input {
    height: 1.4em;
    line-height: 1.4em;
}

.k-picker-wrap .k-select {
    min-height: 1.29em;
    line-height: 1.29em;
    padding-top: 2px;
}

You will need to apply a custom icon as a background to the k-i-calendar class, according to your preferences.


Regards,
Dimo
Telerik