This is a migrated thread and some comments may be shown as answers.

Expand / collapse image size

3 Answers 124 Views
Grid
This is a migrated thread and some comments may be shown as answers.
neebs
Top achievements
Rank 2
neebs asked on 09 Aug 2010, 08:22 PM
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

3 Answers, 1 is accepted

Sort by
0
Cori
Top achievements
Rank 2
answered on 09 Aug 2010, 08:57 PM
Try adding, vertical-align: middle, and see if that helps.
0
neebs
Top achievements
Rank 2
answered on 09 Aug 2010, 09:03 PM
No, I already tried that. Didn't work. Also text-align:center.

Steve
0
Dimo
Telerik team
answered on 11 Aug 2010, 10:31 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
neebs
Top achievements
Rank 2
Answers by
Cori
Top achievements
Rank 2
neebs
Top achievements
Rank 2
Dimo
Telerik team
Share this question
or