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

How to style the DateTimePicker for iPad? - Date/Time Icons difficult to click

3 Answers 64 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Landon
Top achievements
Rank 2
Landon asked on 07 Oct 2013, 08:29 PM
Hi,

I'm currently using the DateTimePicker on a couple crucial ages in my PC/iPad web app. The picker seems to work fine on an iPad, but the Calendar/Clock icons are difficult to click as they are very close together. I've included a small sample image.

I'm looking to style the DateTimePicker so the Calendar/Clock icons are slightly further apart to allow room for users with larger fingers. I've attempted accessing the "k-select" class on my pickers, but that seems to throw off the hover CSS as well.

Is this possible?

Thanks,
Landon

3 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 09 Oct 2013, 12:25 PM
Hi Landon,

In order to achieve the desired result you should override the default styling. For example you could increase the icons margin:

.k-datetimepicker .k-picker-wrap .k-icon {
     margin: 0 0.34em;
}
            
Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Landon
Top achievements
Rank 2
answered on 09 Oct 2013, 02:48 PM
Hi Iliana,

Thank you for the sample code. This CSS does allow me to space the icons properly, but it pushes them outside the bounds of the DateTimePicker. This seems to cause some issues when hovering/not hovering the Picker. I've included another example Image to describe this better.

Is it possible to increase the margin on the icons while also extending the icon section of the DateTimePicker?

Thanks,
Landon

0
Iliana Dyankova
Telerik team
answered on 11 Oct 2013, 07:25 AM
Hello Landon,

Basically in order to achieve this you should use custom CSS rules. For example:

  • Increase .k-select element width;
  • Decrease dateTimePicker .k-input width;
More detailed information about customizing the appearance of Kendo UI widgets can be found in the corresponding documentation.

Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Date/Time Pickers
Asked by
Landon
Top achievements
Rank 2
Answers by
Iliana Dyankova
Telerik team
Landon
Top achievements
Rank 2
Share this question
or