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

4 posts, 0 answers
  1. Landon
    Landon avatar
    66 posts
    Member since:
    Nov 2010

    Posted 07 Oct 2013 Link to this post

    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
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 09 Oct 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Landon
    Landon avatar
    66 posts
    Member since:
    Nov 2010

    Posted 09 Oct 2013 Link to this post

    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

  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 11 Oct 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready