This is a migrated thread and some comments may be shown as answers.

Styling Questions

3 Answers 58 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Ibrahim Imam
Top achievements
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:
 
 .MyCloseButton { 
   cursor:pointer
    background-imageurl('Dock/close.gif'); 
 
.rdTitleBar 
    border-stylesolid
      border-color:Gray; 
     border:1px
     background-color#003063
     margin:0px
     padding-bottom:4px
      padding-top:4px
 
 
div.RadDock .rdCenter em  
     colorrgb(255, 255, 255); 
    font-familyVerdana
     font-size:14px
     font-weight:bold
    text-alignleft
    padding-left:7px
    margin:0px
 
 
 div.RadDock .rdContent { 
 
    background-color#9cb6d6
    padding5px
        border-stylesolid
         border-bottom-color:#003063
         border-left-color:Gray; 
         border-right-color:Gray; 
      border-top-color:#003063
    border-width1px
    margin:0px

3 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 28 Apr 2010, 10:01 AM
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:
.rdLeft, .rdRight, .rdBottom
{
    display: none !important;
}
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:
<%@ 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">
<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
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
0
Pero
Telerik team
answered on 05 May 2010, 12:28 PM
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:

<%@ 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">
<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.
Tags
Dock
Asked by
Ibrahim Imam
Top achievements
Rank 1
Answers by
Pero
Telerik team
Ibrahim Imam
Top achievements
Rank 1
Share this question
or