I have created a custom css-style for RadDocks. The only thing I cannot style at the moment is the border around the dropzone when RadDoscks are dragged. I used HighlightedCssClass to get a hatch pattern like this:
<style type="text/css">
.DockZoneSelectie {
background-color: #FFC272 !important;
}
.rdPlaceHolder {
background-color: #FFD7A3 !important;
background: url(images/hatch.gif) repeat;
}
</style>
That works fine, however I cannot control the border around the dropzone, this dropzone is 2 pixels too wide so the border will be clipped when DockZones are next too each other. A screendump can be seen here here. I based my custom style on the default RadDock style but there is no style to be found there that sets the border. Also I used radDock.EnableEmbeddedBaseStylesheet = false; radDock.EnableEmbeddedSkins = false; to disable embedded skins. How do I get access to the border style of the highlighted area when docks are dragged?
1 Answer, 1 is accepted
You should set a smaller width to the rdPlaceHolder class and everything will be fine, e.g.
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head id="Head1" runat="server"> |
| <title></title> |
| <style type="text/css"> |
| .DockZoneSelectie |
| { |
| background-color: #FFC272 !important; |
| } |
| .rdPlaceHolder |
| { |
| background-color: #FFD7A3 !important; |
| border: solid 5px red !important; |
| width: 97% !important; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <div> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <telerik:RadDockZone ID="RadDockZone1" runat="server" HighlightedCssClass="DockZoneSelectie" Width="300px"> |
| <telerik:RadDock ID="RadDock1" runat="server" Text="RadDock1" Title="RadDock1"/> |
| </telerik:RadDockZone> |
| <telerik:RadDockZone ID="RadDockZone2" runat="server" HighlightedCssClass="DockZoneSelectie" Width="300px"> |
| <telerik:RadDock ID="RadDock2" runat="server" Text="RadDock2" Title="RadDock2"/> |
| </telerik:RadDockZone> |
| </div> |
| </form> |
| </body> |
| </html> |
Let us know if you have any other questions.
Sincerely yours,
Petio Petkov
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.