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

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


    Thank you
    Amitkumar



  2. Dimo
    Admin
    Dimo avatar
    8330 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" />

    $("#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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top