Modifying Dock Expand icon

6 posts, 0 answers
  1. Tony Polad
    Tony Polad avatar
    19 posts
    Member since:
    Apr 2009

    Posted 03 Sep 2008 Link to this post

    Hi,

    1. How do I modify the expand/collapse icon in the dock ?
    2. How do I move the position of the expand/collapse icon to left side.

    Here is what I wanna do.
    1. Change the expand/collapse icon with the triangle icon.
    2. Move the position of the expand/collapse icon to the left (just before the title of the dock)

    Any help would be appriciated.

    Thanks.
  3. -DJ-
    -DJ- avatar
    263 posts
    Member since:
    Oct 2004

    Posted 03 Sep 2008 Link to this post

    Hi Susanto.

    1. You just have to edit the

    .RadDock_MySkin .rdCollapse

     and

    .RadDock_MySkin .rdExpand

    classes. There you can set a new image of your choice.

    Example:

    .RadDock_MySkin .rdCollapse
    {
        background:url(Dock/minimize.png) no-repeat;
    }

    2. To align it to the left side I'm guessing you will have to set a right margin. How big depends on the width of your dock.

    Something like this should work:

    .RadDock_MySkin .rdCollapse
    {
        background:url(Dock/minimize.png) no-repeat;
        margin-right: 250px
    }

    Note that you can also set hover images for both the expand and collapse images by adding these classes to your skin css file:

    .RadDock_MySkin .rdCollapse:hover
    .RadDock_MySkin .rdExpand:hover

    Regards,
    -DJ-


  5. Tony Polad
    Tony Polad avatar
    19 posts
    Member since:
    Apr 2009

    Posted 03 Sep 2008 Link to this post

    Hi,

    Thanks for the answer.

    The icon is works.

    But

    The alignment does not work as expected.

    I have a dynamic size of Dock. The Dock can be resize at any time.

    How you you set it from css without set the fixed value. I did try to put percentage, but it does not work.

    Do you have any other suggestion ?

    Thanks.
  7. -DJ-
    -DJ- avatar
    263 posts
    Member since:
    Oct 2004

    Posted 04 Sep 2008 Link to this post

    Hi again Susanto.

    I won't be at my work computer until next Tuesday, so I'm afraid I won't be of much help to you.

    If I remember correctly there is no Dir="rtl" property for the Dock, nor is there a simple align value for the buttons.

    Using % doesn't sound like a bad idea, but you will probably have to add some javascript so the % get applied on the fly as the user resizes the dock.

    That is if you get the % working in the first place.

    Regards,
    -DJ-
  8.
  9. Martin
    Admin
    Martin avatar
    585 posts

    Posted 05 Sep 2008 Link to this post

    Hi Susanto,

    Unfortunately, the scenario with the left-aligned expand / collapse button cannot be achieved with the current rendering of RadDock neither with margins (as DJ has suggested), nor with any kind of positioning, because the buttons have a wrapping element that does not allow such manipulation.

    I have tried several approaches, but none of these worked.

    Have a great weekend,
    Martin Ivanov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  11. harika dasari
    harika dasari avatar
    15 posts
    Member since:
    Oct 2009

    Posted 05 Nov 2009 Link to this post

    Hi,

      I want to change the image of Expand/Collapse of raddock
    i tried giving the same as mentioned
    but not working
    following is the code which i have added to my aspx page

     

    <

     

    style type="text/css">

     

     

     

     

     

     

     

     

    .rdExpand

     

     

     

    {

     

     

     

    background:url(DockImage\DockImage\Images\red.urgent.icon.28x28.gif) no-repeat;

     

     

     

    }

     

    </style>

    Need help on this asap

    Thanks in Advance
    Pushpa.

     

Back to Top