This is a migrated thread and some comments may be shown as answers.

Change the arrow images of RadlistBox buttons

1 Answer 79 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Alok
Top achievements
Rank 2
Alok asked on 06 Oct 2014, 06:17 AM
Hi ,

Q1. Is it possible to change the arrow images of RadlistBox buttons(please find enclosed snapshot)?

Q2. In IE 10, arrow images are not visible for RadListBox buttons, and its an intermediate issue. Please suggest ?

Thanks
P

1 Answer, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 06 Oct 2014, 08:14 AM
Hello Alok,

Straight to your questions:
  1. Arrow images in classic render mode can be replaced by overwriting the background image with your custom sprite by the following
    html .RadListBox .rlbButtonText {
        background-image: url(image-url);
    }
    The distances between icons in the new sprite should to be the same as in the sprite in the base skin that you are applying to the control. Otherwise it is necessary to change background position for every ListBox button.

    The easier way is using ListBox in lightweight render mode 
    <telerik:RadListBox runat="server" RenderMode="Lightweight">
    where we are using font icons instead of sprites for displaying the buttons icons. The font icons are applied by the content property of pseudo elements. To change the content, please apply the following
    html .RadListBox .rlbIconMoveUp:before {
        content: "\E128"
    }
     
    html .RadListBox .rlbIconMoveDown:before {
        content: "\E129"
    }

    We are sending you the full list of CSS classes of all buttons used in RadListBox (by replacing the rlbIconMoveUp:before and rlbIconMoveDown:before selector in the previous snippet you can change icons of other buttons):
    rlbIconTransferLeft:before,
    rlbIconTransferAllRight:before,
    rlbIconTransferAllLeft:before,
    rlbIconTransferAllRight:before,
     
    rlbIconDelete:before,
     
    rlbIconMoveUp:before,
    rlbIconMoveDown:before,
    rlbIconMoveToTop:before,
    rlbIconMoveToBottom:before,
    rlbIconDelete:before,
    rlbIconTransferUp:before ,
    rlbIconTransferDown:before,
    rlbIconTransferLeft:before,
    rlbIconTransferRight:before,
    rlbIconTransferAllUp:before,
    rlbIconTransferAllDown:before,
    rlbIconTransferAllLeft:before ,
    rlbIconTransferAllRight:before


  2. Invisible icons in IE11 is an issue of the 2014.2.724 version. To fix the issue, please update to the last version or try to apply the following workaround
    html .RadListBox .rlbNoButtonText .rlbButtonText {
        font-size: 12px;
    }

Regards,
Magdalena
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
ListBox
Asked by
Alok
Top achievements
Rank 2
Answers by
Magdalena
Telerik team
Share this question
or