Custom gif for rtMinus not showing

3 posts, 0 answers
  1. Kenyon
    Kenyon avatar
    4 posts
    Member since:
    Nov 2013

    Posted 07 Sep Link to this post

    I tried to apply my own gif to the "expanded" arrow but when clicking it shows nothing at all.  I tried setting background-color as a control test and that worked fine.

    The gif is currently just a plain colored square so it'd be pretty obvious to see that it's working.

    Attachment shows how it looks on the page (no icons).

    Where am I going wrong?

    Here's my CSS:

    .RadTreeView_MetroTouch .rtMinus {
        background-image: url('../Images/Test.gif') !important;   
    }
  2. Peter Milchev
    Admin
    Peter Milchev avatar
    300 posts

    Posted 13 Sep Link to this post

    Hi Kenyon,

    Would you please check if applying the following styles fits your case? 

    <style>
        div.RadTreeView .rtPlus,
        div.RadTreeView .rtMinus {
            background-image: url("https://www.accorhotels.com/imagerie/commun/ajax-loader.gif");
        }
     
        html div.RadTreeView .rtPlus:before,
        html div.RadTreeView .rtMinus:before {
            content: none;
        }
     
        div.RadTreeView .rtLines .rtTop,
        div.RadTreeView .rtLines .rtMid,
        div.RadTreeView .rtLines .rtBot,
        div.RadTreeView .rtLines .rtLast .rtTop,
        div.RadTreeView .rtLines .rtFirst,
        div.RadTreeView .rtLines .rtFirst .rtUL,
        div.RadTreeView .rtLines .rtLI,
        div.RadTreeView .rtLines .rtFirst .rtUL {
            background-image: none;
        }
    </style>


    Here are some screenshots of the TreeView Overview demo: 
    Regards,
    Peter Milchev
    Progress Telerik
    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.
  3. Kenyon
    Kenyon avatar
    4 posts
    Member since:
    Nov 2013

    Posted 13 Sep Link to this post

    Aha, I found the problem.  For some reason background-position was being set to -65 -65 (not in my CSS).

    Added background-position: 0; to my CSS and it's now showing correctly.

    Guess I should have checked the debugging window more carefully.

Back to Top