This is a migrated thread and some comments may be shown as answers.

Datepicker input height

2 Answers 1016 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Kent
Top achievements
Rank 1
Kent asked on 01 Mar 2017, 02:34 PM

I want to reduce the input height of Datepicker and already done that by following the link below. But in Chrome, it has a grey shadow under the input and calendar icon.  How to adjust css to avoid that? Thanks.

http://www.telerik.com/forums/reduce-height-of-calender-image-in-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;
}

 

2 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 02 Mar 2017, 08:33 AM
Hello Kent,

You can further tweak the appearance of the Kendo UI DatePicker in accordance with your preference via overwriting our built-in CSS rules, e.g.:

http://dojo.telerik.com/AHile

The most straight-forward approach would be to inspect the DOM elements in the browser's developer tools (F12), see what rules are applied to the respective CSS selectors, and overwrite the styles.

Regards,
Dimiter Topalov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kent
Top achievements
Rank 1
answered on 03 Mar 2017, 02:49 PM
Thanks for the dojo example.  Super useful.
Tags
Date/Time Pickers
Asked by
Kent
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Kent
Top achievements
Rank 1
Share this question
or