Expand Collapse images replacement issue

3 posts, 0 answers
  1. Arpit
    Arpit avatar
    10 posts
    Member since:
    Dec 2017

    Posted 13 Dec 2017 Link to this post

    How can I replace expand/collapse images of Radpanel item with some other images when RenderMode="Lightweight" ?

    On expand I need to show different image and On collapse I need to show another image.

     

    Below solution is not working for me because I think skin file selector is not supporting.

     

    <style>
        .t-i-expand-s:before, .t-i-expand-down:before, .p-i-expand-s:before, .p-i-expand-down:before, .p-i-arrow-chevron-down:before {
            content: "\e100" !important;
        }

        .t-i-expand-n:before, .t-i-expand-up:before, .p-i-expand-n:before, .p-i-expand-up:before, .p-i-arrow-chevron-up:before {
            content: "\e101" !important;
        }
    </style>

     

     

    Right now my selector is like

     

    .RadPanelBar .rpExpandable .rpExpandHandle 

    {

    display : block;

    }

     

     

  2. Rumen
    Admin
    Rumen avatar
    13843 posts

    Posted 15 Dec 2017 Link to this post

    Hi,

    I just replied to your other forum thread on the subject: http://www.telerik.com/community/forums/radpanelbar-collapse-and-expand-image.

    Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Arpit
    Arpit avatar
    10 posts
    Member since:
    Dec 2017

    Posted 15 Dec 2017 in reply to Arpit Link to this post

    I tried it from myself .......working fine.

    Posting style to help others.

    <style>

             /*To set the right side expand image of RadPanelItem*/
            .RadPanelBar .rpExpandable .rpExpandHandle::before
            {
                content: url(../Modules/CS_AccordianNavigation/Images/plus20.png) !important;
            }

            /*To set the position of right side expand image of RadPanelItem*/
            .RadPanelBar .rpRootLink .rpExpandHandle
            {
                right : 5px !important;
                width : 20px !important;
                  top : 9px !important;
            }

    </style>

Back to Top