Editor icons not visible

10 posts, 0 answers
  1. Diljeet
    Diljeet avatar
    8 posts
    Member since:
    Jul 2013

    Posted 31 Jul 2013 Link to this post

    Please see the attached screen shot, the editor renders but there are no icons on the tool bar, I checked editor.png is in the default folder.

     <textarea cols="25" rows="5" id="History" style="width:420px"  name="History"  placeholder="this is a History field" ></textarea>

     $("#History").kendoEditor({
                tools: [
                    "bold",
                    "italic",
                    "underline",
                    "strikethrough",
                    "justifyLeft",
                    "justifyCenter",
                    "justifyRight",
                    "justifyFull"
                       ]
            });

    This is urgent  please  help
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 31 Jul 2013 Link to this post

    Hello Diljeet,

    Did you inspect whether the sprite.png file is at the correct location, where the CSS theme expects it to be? Did you inspect whether the button styles are overridden by some other styles on the page? All contemporary browsers provide tools for these tasks.

    If the above verifications do not show the cause of the problem, please provide a runnable example or a live URL for further investigation.

    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. Diljeet
    Diljeet avatar
    8 posts
    Member since:
    Jul 2013

    Posted 31 Jul 2013 Link to this post

    http://eesea.antheminfotech.net/terminals

    this is the working url, editors are placed at the bottom of the page. 
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 01 Aug 2013 Link to this post

    Hi Diljeet,

    The Kendo UI CSS code is from a newer version than the sprite.png image.

    Please try upgrading again and correctly.

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

    Posted 01 Aug 2013 Link to this post

    Hi Dimo,

    Thanks for your reply.

    Can you please provide me the updated  sprite.png image. As i have no idea from where to get the latest image.
    Or can you let me know from where i can get this image.

    Best Regards.
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 02 Aug 2013 Link to this post

    Hello Diljeet,

    The sprite image is located in

    styles / ThemeName / sprite.png

    of the Kendo UI installation folder.

    http://docs.kendoui.com/getting-started/introduction

    http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/introduction#manually-add-kendo-ui-to-asp.net-mvc-applications

    http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/vs-integration/upgrade-wizard

    Since it is not clear if there are other non-upgraded files as well, I recommend you to delete all Kendo UI-related stylesheets, Javascript files and wrapper assemblies (if you are using the MVC wrappers) and add them again, following the documentation guidelines.

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

    Posted 06 Nov 2013 Link to this post

    Hi Dimo,

    I have a similar issue where I don't see the editor icons on the editor. When I hover the mouse over the editor tool, I can see the text indicating the type of tool. And as per this thread and the thread http://www.kendoui.com/forums/kendo-ui-web/editor/editor-tool-icons-not-displaying-after-themebuilder-theme-applied.aspx the version of the theme (sprite.png, etc. files) and the scripts (.js files) should be the same.

    I don't know how to check the version of the sprite.png and also which of the below two sprite.png files I should check for the version. However, I do see that the -
    .css files in the project name>webroot>resources>styles>theme name folder have version V2013.1.514 and .css files in the project name>webroot>styles>theme name folder have version V2013.1.319

    project name>webroot>resources>styles>theme name>sprite.png
    and
    project name>webroot>styles>theme name>sprite.png

    Also, I find scripts (.js file) in 2 folders as mentioned below. Which one should I check for the version and compare it's version with the sprite.png file's version.
    project name>webroot>resources>js (version V2013.1.514) and
    project name>webroot>scripts>js (version V2013.2.716)

    Another thing I see is that the editor.png has a different sequence of tools and the sequence of the tools in the actual editor is different. I am not sure if this is relevant or not. Again editor.png is present in these 2 folders: project name>webroot>resources>styles>theme name and project name>webroot>styles>theme name

    Please provide me clear instructions on the files I need to change to correct the problem and where can I find these files. Any other steps I need to take to correct this problem. This is urgent! Thanks in advance for your help.

    Alka
  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 07 Nov 2013 Link to this post

    Hi Alka,

    The sprite images do not have a version specified anywhere, but you need to make sure that you are always copying images together with the theme CSS files when uprading Kendo UI. In this way the CSS files will always be referencing the correct images.

    Having three different versions of Kendo UI scripts and stylesheets in a single project is unnecessary, messy and unmaintainable. I recommend you to remove all Kendo UI scripts and stylesheets and take a single fresh copy of them from your Kendo UI installation folder.

    http://docs.kendoui.com/getting-started/introduction

    Generally, there are two very straightforward and commonsense things that a web developer should do when some background images do not appear:

    1. Check whether the CSS styles, which reference the missing images, are applied (if not, they may be missing or be overridden).
    2. Check whether the images are placed at the location specified in the CSS code (if not, you will see 404 errors in the browser's console).

    Any DOM inspector, which modern browser provide, will help you with these tasks.

    Finally, if only the Editor icons are not displayed, while other Kendo UI widgets work fine, then the reason is indeed mismatching versions of the CSS file and the image sprite.

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

    Posted 07 Nov 2013 Link to this post

    Thanks Dimo. I downloaded latest version of Kendo UI and upgraded the js, css and image files in my project and that did solve the problem. However the rest of the UI of the application got messed up. If I can find out the exact js, css and image files being used for the editor, then I will just change those without touching the rest of the project, to make sure their version matches and the issue I face is resolved without affecting the rest of the UI.
  11. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 08 Nov 2013 Link to this post

    Hello Alka,

    The Editor scripts, styles and images cannot be isolated and upgraded separately. Please investigate what exactly the problem is and provide a runnable demo if you need additional assistance.

    Regards,
    Dimo
    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