Expand / collapse image size

[neebs]

I have a need to display a hierarchical grid on a touch-screen. The customer is requesting that the size of the buttons be larger for this purpose. I have tried overriding the image size using the following CSS override:

div.RadGrid .rgExpand,
div.RadGrid .rgCollapse
{
    height:32px;
    width:32px;
}

which works, however the image is located on the top left corner. It would be nicer if it were centered. Is there a better way of accomplishing this? if not is there a way to center the image?

Thanks, Steve

[Cori]

Try adding, vertical-align: middle, and see if that helps.

[neebs]

No, I already tried that. Didn't work. Also text-align:center.

Steve

[Dimo]

Hello,

text-align:center and vertical-align:middle will not work in this case.

The hierarchy expand/collapse buttons use CSS sprites (see link below). So in order to change the image alignment when changing the button's size, you also need to override the RadGrid skin and modify the background-position styles.

http://www.telerik.com/help/aspnet-ajax/css-sprites.html

Best wishes,
Dimo
the Telerik team