Styling Questions

4 posts, 0 answers
  1. Ibrahim Imam
    Ibrahim Imam avatar
    69 posts
    Member since:
    Jul 2007

    Posted 26 Apr 2010 Link to this post

    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
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 28 Apr 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ibrahim Imam
    Ibrahim Imam avatar
    69 posts
    Member since:
    Jul 2007

    Posted 03 May 2010 Link to this post

    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
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 05 May 2010 Link to this post

    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.
Back to Top