change date pciker icon

9 posts, 1 answers
  1. Wit
    Wit avatar
    43 posts
    Member since:
    Aug 2014

    Posted 21 Nov 2014 Link to this post

    Hi ,

    I would like to change icon I have tried :

    .k-i-calendar {
        background-image: url('../images/svg/calendar_icon.svg') !important;
        height: 16px !important;
        width: 16px !important;
        background-size: 16px 16px;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    but it has no effect. CSS Inspector shows that my svg file is in use but old icon is displayed. 
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 25 Nov 2014 Link to this post

    Hello Wit,

    The provided CSS styles should work. You even don't need all of them, and some of the !important clauses can be removed if you use an additional :hover selector:

    http://dojo.telerik.com/USEXE

    Regards,
    Dimo
    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. Wit
    Wit avatar
    43 posts
    Member since:
    Aug 2014

    Posted 26 Nov 2014 in reply to Dimo Link to this post

    That looks great, but have you tried it with svg instead of png?
  5. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 27 Nov 2014 Link to this post

    Hello Wit,

    SVG backgrounds work as well, I tested with latest Chrome, Firefox and IE11:

    http://dojo.telerik.com/USEXE/2

    The problem on your side may be caused by the browser version or browser settings.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Wit
    Wit avatar
    43 posts
    Member since:
    Aug 2014

    Posted 27 Nov 2014 in reply to Dimo Link to this post

    Hi Dimo,

    I am using the latest version of browsers. What kind of browser setting do you have in mind?  I am using svg icons in a different part of my application and they work just fine.

    Thank you
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 28 Nov 2014 Link to this post

    Hello Wit,

    I did not have any specific setting in mind, this was "food for thought". For example, Internet Explorer has various security settings, which can prevent certain features from working. Chrome and Firefox have loads of internal settings, which are accessible by advanced users, etc.

    Does my demo with the SVG background image work on your side? If yes, then you have no problems with SVG images, but with CSS styles. I am pretty sure that you have already double checked that the image exists at the expected location and the URL is correct, so the only thing, which comes to mind is CSS specificity.

    Try removing some stylesheets (leave the Kendo UI ones + the SVG-related CSS rules) and see what happens.

    If your research does not isolate the cause of the problem, then send me a runnable example for inspection.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Ludovic
    Ludovic avatar
    4 posts
    Member since:
    Jan 2015

    Posted 01 Jun 2015 Link to this post

    Hi Dimo,

    I tried your code example, it work very well on PC with Chrome, but it doesn't work on an Ipad with Chrome too.

    On Ipad, on DateTimePicker load, it display the up arrow that is on the top left on your file sprite.png. So the .k-i-calendar class is not considered. Then after a mouse over (finger over on Ipad !) the class .k-i-calendar:hover is well considered and the good icone is displayed. Strange, not ?

    You can try it with an Ipad and your example: http://dojo.telerik.com/USEXE

    Do you have a solution ?

    Regards,

    Ludovic

     

  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 03 Jun 2015 Link to this post

    Hi Ludovic,

    Kendo UI icons use a different sprite image for retina displays. This can be easily tracked down if you inspect the datepicker's icon in emulated device mode in Google Chrome (see the screenshot).

    In this particular case, the correct icon on iPads is not displayed because of the !important clause that you are using for the background position.

    You have two options:

    1. Enforce your non-retina icon on retina displays by using higher specificity, which overrides the retina styles.

    .k-widget .k-icon.k-i-calendar,
    .k-widget .k-icon.k-i-calendar:hover {
        background-size: 16px 16px;
        background-position: center;
    }


    or

    2. Use a separate CSS rule with a media query (similar to ours) with a different icon for retina displays.


    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Ludovic
    Ludovic avatar
    4 posts
    Member since:
    Jan 2015

    Posted 03 Jun 2015 in reply to Dimo Link to this post

    Thanks Dimo,

    I tried your first solution and it works !

Back to Top
Kendo UI is VS 2017 Ready