Ibrahim Imam
Top achievements
Rank 1
Rank 1
Ibrahim Imam
asked on 26 Apr 2010, 09:15 AM
hello
i am using the raddock window as a replacement for one of our own controls which is basically just a styling element which holds other controls.
i adapted the css file and added a custom button which make the dockwindow look almost equally to our own control.
i have troubles with some details of the style (see pictures for better understanding)
markings in DockWindow2 : i assume this is the space from raddockzone, how can i disable it or set it to 0 so it's not taking any space?
DockWindow1, markin of button: how can i make the mouse getting a pointer when navigated on the button?
DockWindow1, inner window right marking: the border on the right side is missing, it is correctly on the left side
here is my css file:
i am using the raddock window as a replacement for one of our own controls which is basically just a styling element which holds other controls.
i adapted the css file and added a custom button which make the dockwindow look almost equally to our own control.
i have troubles with some details of the style (see pictures for better understanding)
markings in DockWindow2 : i assume this is the space from raddockzone, how can i disable it or set it to 0 so it's not taking any space?
DockWindow1, markin of button: how can i make the mouse getting a pointer when navigated on the button?
DockWindow1, inner window right marking: the border on the right side is missing, it is correctly on the left side
here is my css file:
| .MyCloseButton { |
| cursor:pointer; |
| background-image: url('Dock/close.gif'); |
| } |
| .rdTitleBar |
| { |
| border-style: solid; |
| border-color:Gray; |
| border:1px; |
| background-color: #003063; |
| margin:0px; |
| padding-bottom:4px; |
| padding-top:4px; |
| } |
| div.RadDock .rdCenter em |
| { |
| color: rgb(255, 255, 255); |
| font-family: Verdana; |
| font-size:14px; |
| font-weight:bold; |
| text-align: left; |
| padding-left:7px; |
| margin:0px; |
| } |
| div.RadDock .rdContent { |
| background-color: #9cb6d6; |
| padding: 5px; |
| border-style: solid; |
| border-bottom-color:#003063; |
| border-left-color:Gray; |
| border-right-color:Gray; |
| border-top-color:#003063; |
| border-width: 1px; |
| margin:0px; |
| } |
3 Answers, 1 is accepted
0
Hi Ibrahim,
1. The border should be applied to the RadDock, and not to its content. That's why the border does not appear on the title.
2. I am not sure which "spacing/padding" you are referring to. If it is the zone padding, then use the .RadDockZone class to specify different padding. If it is not, then use this CSS to remove the padding:
I have pasted the source code of a sample project, that uses this CSS.
3. You have correctly specified cursor: pointer for the custom command, but you also need to mark it as !important in order for the styling to be applied.
Here is the source code of a working project:
Please let me know if you have any problems or questions.
Regards,
Pero
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.
1. The border should be applied to the RadDock, and not to its content. That's why the border does not appear on the title.
2. I am not sure which "spacing/padding" you are referring to. If it is the zone padding, then use the .RadDockZone class to specify different padding. If it is not, then use this CSS to remove the padding:
.rdLeft, .rdRight, .rdBottom{ display: none !important;}3. You have correctly specified cursor: pointer for the custom command, but you also need to mark it as !important in order for the styling to be applied.
Here is the source code of a working project:
<%@ 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"> .rdLeft, .rdRight, .rdBottom { display: none !important; } .MyCloseButton { cursor: pointer !important; background-image: url('img/customclose.png') !important; } .rdTitleBar { border-style: solid; border-color: Gray; border: 1px; background-color: #003063; margin: 0px; padding-bottom: 4px; padding-top: 4px; } .RadDock .rdCenter em { color: rgb(255, 255, 255); font-family: Verdana; font-size: 14px; font-weight: bold; text-align: left; padding-left: 7px; margin: 0px; } .RadDock .rdContent { background-color: #9cb6d6; margin: 0px; } .RadDock { border-style: solid; border-bottom-color: #003063; border-left-color: Gray; border-right-color: Gray; border-top-color: #003063; border-width: 1px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> </Scripts> </asp:ScriptManager> <div> <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px"> <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"> <Commands> <telerik:DockCommand CssClass="MyCloseButton" /> </Commands> <ContentTemplate> <br /> <br /> <br /> <br /> <br /> CONTENT <br /> <br /> <br /> <br /> <br /> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </telerik:RadDockLayout> </div> </form></body></html>Please let me know if you have any problems or questions.
Regards,
Pero
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.
0
Ibrahim Imam
Top achievements
Rank 1
Rank 1
answered on 03 May 2010, 02:16 PM
hello
using the RadDockZone class to disable the spacing/padding worked fine
the adding of important keyword for the pointer of the image also solved this problem
so the two main problems in styling are solved.
the border issue is not in the content of the raddock but in the title bar. i set the style using the div.RadDock .rdCenter em class.
i think that the left-padding makes the border disappear. this is hardly noticable so it is not a big issue currently.
thanks for your help.
regards
using the RadDockZone class to disable the spacing/padding worked fine
the adding of important keyword for the pointer of the image also solved this problem
so the two main problems in styling are solved.
the border issue is not in the content of the raddock but in the title bar. i set the style using the div.RadDock .rdCenter em class.
i think that the left-padding makes the border disappear. this is hardly noticable so it is not a big issue currently.
thanks for your help.
regards
0
Hello Ibrahim,
To resolve the issue with the border not appearing on the title, you should apply border using the .RadDock class, and not separately to the title and content. I have modified the code sent previously, to show that the borders are shown on the title also. Here is the modified code:
Greetings,
Pero
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.
To resolve the issue with the border not appearing on the title, you should apply border using the .RadDock class, and not separately to the title and content. I have modified the code sent previously, to show that the borders are shown on the title also. Here is the modified code:
<%@ 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"> .rdLeft, .rdRight, .rdBottom { display: none !important; } .MyCloseButton { cursor: pointer !important; background-image: url('img/customclose.png') !important; } .rdTitleBar { background-color: #003063; margin: 0px; padding-bottom: 4px; padding-top: 4px; } .RadDock .rdCenter em { color: rgb(255, 255, 255); font-family: Verdana; font-size: 14px; font-weight: bold; text-align: left; padding-left: 7px; margin: 0px; } .RadDock .rdContent { background-color: #9cb6d6; margin: 0px; } .RadDock { border-left: 4px solid Gray; border-right: 4px solid Gray; border-top: 4px solid Gray; } .rdContent { border-bottom: 4px solid #003063; border-top: 4px solid Gray; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> </Scripts> </asp:ScriptManager> <div> <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px"> <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"> <Commands> <telerik:DockCommand CssClass="MyCloseButton" /> </Commands> <ContentTemplate> <br /> <br /> <br /> <br /> <br /> CONTENT <br /> <br /> <br /> <br /> <br /> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </telerik:RadDockLayout> </div> </form></body></html>Greetings,
Pero
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.