Change the arrow images of RadlistBox buttons

[Alok]

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

[Magdalena]

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