Reduce height of Calender Image In Datepicker

2 posts, 0 answers
  1. Amit Kumar
    Amit Kumar avatar
    1 posts
    Member since:
    Feb 2010

    Posted 26 Jun 2013 Link to this post

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

    Thank you

  2. Dimo
    Dimo avatar
    8407 posts

    Posted 27 Jun 2013 Link to this post

    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" />


    .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.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top