Change the arrow images of RadlistBox buttons

2 posts, 0 answers
  1. Alok
    Alok avatar
    39 posts
    Member since:
    Feb 2009

    Posted 06 Oct 2014 Link to this post

    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
  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 06 Oct 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top