Add Vertical Separator "ON" RadToolBarSplitButton

[jlj30]

Hi,

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.

Jim

[Kate]

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.

Regards,
Kate
Telerik

 

 

[jlj30]

Hi Kate,

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

Thanks a lot

Jim