Styling a dock when dragging

[Ryan]

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;
    font-size:16px;
    color:#fff;
    font-weight:bold;
    padding: 0 10px;
    line-height:18px;
}
.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 :)

[Pero]

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: http://www.telerik.com/help/aspnet-ajax/dock-appearance-css-selectors.html.

Greetings,
Pero
the Telerik team

[Ryan]

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