Styling a dock when dragging

3 posts, 1 answers
  1. Ryan
    Ryan avatar
    26 posts
    Member since:
    Sep 2010

    Posted 18 Mar 2011 Link to this post

    Hi all.

    I've been using css to alter the default visible RadDock objects successfully (see styled1.png).
    I've just been including whatever I can find in the inspector that's auto-generated and overwriting it using the (my) parent container .two20, for example:
    .two20 .RadDock .rdTitleBar em
        font-family:Verdana, Sans-Serif;
        padding: 0 10px;
    .two20 .RadDock .rdContent {font-family:Verdana, Sans-Serif;}

    However I notice when I drag a widget, it reverts to it's old style (see styled2.png) - using the wrong font family, colour, size, etc etc.

    I can't inspect while in dragging state, so I can't see what id/class it's using; I'm thinking there must be another container that's using different styles that I'm not overwriting and isn't generated until the drag starts (as I can't find it in view source either).

    Where can I find the styles it's generating when a widget is in it's dragging-state?

    Thank you :)
  2. Answer
    Pero avatar
    1156 posts

    Posted 22 Mar 2011 Link to this post

    Hi Ryan,

    Note that when the dock is being dragged it goes outside its initial parent, and becomes child to the <form> element. So, any styles applied through its parent's class selector, will not be applied when you drag the dock. My suggestion is to specify CssClass to the dock, and apply the styles through the class set.
    The rdDragHelper gets applied to the RadDock's wrapper element when it is moved on the page. This class applies opacity.

    The following article contains all the CSS selectors used in the RadDock:

    the Telerik team
  3. DevCraft R3 2016 release webinar banner
  4. Ryan
    Ryan avatar
    26 posts
    Member since:
    Sep 2010

    Posted 23 Mar 2011 Link to this post

    Thank you! That's exactly what I needed to know, cheers.
Back to Top