Add Vertical Separator "ON" RadToolBarSplitButton

3 posts, 1 answers
  1. jlj30
    jlj30 avatar
    102 posts
    Member since:
    Jan 2011

    Posted 21 Mar 2014 Link to this post


    Some of our users are finding it difficult to grasp the difference between a RadToolBarSplitButton  and a RadToolBarDropDown.
    It seems that the subtle difference in the vertical offset of the dropdown arrow is not sufficient.

    So, we'd like to add a thin vertical bar (like a separator) between the image and the dropdown arrow on the split button.
    One solution that comes to mind is to add this bar to the image itself, but the image changes so we'd need to modify all of the images.

    Is there some other technique that we could employ to accomplish this?

    Thanks in advance for any advice.

  2. Answer
    Kate avatar
    1898 posts

    Posted 25 Mar 2014 Link to this post

    Hi Jim,

    You could use the following css class selector and set a verticla border to the arrow image:
    div.RadToolBar_Silk .rtbExpandDown .rtbIn .rtbChoiceArrow {
         border-left: 1px solid #FF0000;

    Please note that this is valid for the Silk skin and you will need to alter the name of the selector should you happen to use any other skin of the RadToolBar control.


    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

  3. jlj30
    jlj30 avatar
    102 posts
    Member since:
    Jan 2011

    Posted 25 Mar 2014 in reply to Kate Link to this post

    Hi Kate,

    I used a slightly modified version of what you provided.
    I think it will do the job.

    Thanks a lot

Back to Top