Expand / collapse image size

4 posts, 0 answers
  1. neebs
    neebs avatar
    106 posts
    Member since:
    Apr 2007

    Posted 09 Aug 2010 Link to this post

    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
  2. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 09 Aug 2010 Link to this post

    Try adding, vertical-align: middle, and see if that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. neebs
    neebs avatar
    106 posts
    Member since:
    Apr 2007

    Posted 09 Aug 2010 Link to this post

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

    Steve
  5. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 11 Aug 2010 Link to this post

    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
Back to Top