SideBorder Problem...

2 posts, 0 answers
  1. Test
    Test avatar
    25 posts
    Member since:
    Jul 2008

    Posted 27 Oct 2009 Link to this post

    Hi All.

    I am using telerik dock control in my application. and i want to customized the style of dock control with rounded corder.
    I have done that but my problem is that i can't set left and right border with diff images/colors.

    I found one property in css called ".rdSideBorders". buit it set border on bothsides.

    please see attached document.




    Can anyone please help me how to set right and left border with different images/colors,

    here is my css file code

    /* Docking Zone properties */

    .RadDockZone_Custom
    {
    border: 1px solid #d3d3d3;
    padding: 5px 0 0 5px;
    }

    * > .RadDockZone_Custom.rdVertical /* hidden from IE6 */
    {
    padding-right: 5px;
    }

    /* Dock_o Object properties */

    /* wrappers and borders */

    .RadDock_Custom .rdPlaceHolder
    {
    border-color: #666;
    }

    .RadDock_Custom
    {
    margin: 0 5px 5px 0;
    background: url(new/FooterLeft.gif) no-repeat 0 100% #FFF;
    color: #000;
    font-family: 'ms sans serif' ,sans-serif;
    text-align: left;
    }

    .RadDock_Custom .rdSideBorders
    {
    background: url(new/org_left_top.gif) repeat-y;
    }

    .RadDock_Custom .rdSideBorders
    {
    border-style: none solid none;
    overflow: visible;
    }
    .RadDock_Custom .rdTopBorder
    {
    border-style: none none none;
    }
    .RadDock_Custom .rdBottomBorder
    {
    border-style: none;
    height: 12px;
    background: url(new/FooterRight.gif) no-repeat 100% 0;
    }


    /* titlebar and buttons */

    .RadDock_Custom .rdTitlebar
    {
    top: 0px; /*brd*/
    color: #fff;
    }



    .RadDock_Custom .rdHTitlebar .rdTitlebar
    {
    height: 40px;
    background: url(new/org_top_left.gif) no-repeat white;
    padding-left: 10px;
    margin-left: -1px;
    }
    .RadDock_Custom.rdCollapsed .rdHTitlebar .rdTitlebar
    {
    padding-bottom: 0px; /*brd - title brd*/
    }
    .RadDock_Custom .rdVTitlebar .rdTitlebar
    {
    left: 1px;
    width: 20px;
    background: url(Dock_o/TitlebarV.gif) repeat-x;
    }

    .RadDock_Custom .rdTitlebar .rdTitle
    {
    font: bold 11px/20px 'ms sans serif' ,sans-serif;
    overflow: hidden;
    }

    .RadDock_Custom .rdHTitlebar .rdTitle
    {
    height: 40px;
    padding-left: 7px;
    margin-right: 4px;
    background: url(new/org_top_title.gif) repeat-x;
    }
    .RadDock_Custom .rdVTitlebar .rdTitle
    {
    padding: 10px 0 0 8px;
    background: url(Dock_o/TitlebarVTop.gif) no-repeat;
    line-height: 1.4em;
    }

    .RadDock_Custom .rdHTitlebar .rdCommands
    {
    padding-right: 10px;
    height: 100%;
    _height: 25px;
    background: url(new/org_top_right.gif) 100% 0 no-repeat white;
    right: -1px;
    }

    .RadDock_Custom .rdHTitlebar .rdCommands a
    {
    margin: 0;
    background-color: #7f99cc;
    }
    .RadDock_Custom .rdVTitlebar .rdCommands a
    {
    margin: 0;
    }

    .RadDock_Custom .rdHTitlebar .rdCommands a, .RadDock_Custom .rdVTitlebar .rdCommands a
    {
    margin: 0 0 0 0;
    }

    .RadDock_Custom .rdTitlebar .rdCommands a
    {
    background-image: url('Dock_o/DockCommandSprites.gif');
    }

    /* inner content */

    .RadDock_Custom .rdContent
    {
    top: 0px; /*brd*/
    padding-bottom: 0px; /*brd*/
    font: 11px/1.2 verdana,sans-serif; background:url(new/org_mid.gif) repeat-x;
    margin-left: 5px;
    }

    .RadDock_Custom .rdVTitlebar .rdContent
    {
    margin-left: 29px;
    }


    /* drag grips */

    .RadDock_Custom .rdGripTop, .RadDock_Custom .rdGripLeft
    {
    background: #FFF;
    }

    .RadDock_Custom .rdGripTop
    {
    top: 0px; /*brd*/
    height: 3px;
    }
    .RadDock_Custom .rdGripLeft
    {
    left: 2px; /*brd*/
    width: 3px;
    }

    .RadDock_Custom .rdWGripLeft .rdContent
    {
    margin-left: 3px;
    }




    /*BASE STYLE*/
    /* RadDock for ASP.NET AJAX Base Stylesheet */

    .RadDockZone
    {
    position: relative;
    border-style: solid;
    border-width: 1px;
    }

    * > .RadDockZone.rdVertical /* hidden from IE6 */
    {
    padding-right: 4px;
    }

    .RadDock
    {
    margin: 0px;
    text-align: left; /* we need this in case the BODY has text-aligh:center applied */
    }

    .rdRtl
    {
    text-align: right; /* we need this in case the BODY has text-aligh:center applied */
    }

    .rdPlaceHolder
    {
    border-style: dashed;
    border-width: 1px;
    }

    .rdHorizontal .RadDock, .rdVertical .RadDock
    {
    position: relative;
    }

    .rdHorizontal .RadDock
    {
    float: left;
    }

    .rdHorizontal .rdRtl
    {
    float: right;
    }

    .RadDock, .rdTopBorder, .rdBottomBorder
    {
    position: absolute;
    overflow: hidden;
    }

    .rdTopBorder, .rdSideBorders, .rdBottomBorder
    {
    border-width: 1px;
    border-color: White;
    }

    .rdSideBorders
    {
    border-style: none solid none;
    }

    .rdTopBorder
    {
    border-style: solid none none;
    }

    .rdBottomBorder
    {
    border-style: none none solid;
    }

    .rdVariableHeight .rdBottomBorder, .rdCollapsed .rdBottomBorder
    {
    position: static;
    }

    .rdSideBorders
    {
    height: 100%;
    overflow: hidden;
    z-index: 10;
    }
    .rdVariableHeight .rdSideBorders
    {
    height: auto;
    }

    .rdTopBorder, .rdBottomBorder
    {
    width: 100%;
    }
    .rdTopBorder
    {
    top: 0;
    left: 0;
    }
    .rdBottomBorder
    {
    bottom: 0;
    left: 0;
    }

    .rdContent, .rdGripTop
    {
    position: relative;
    }

    /* titlebar */
    .rdTitlebar
    {
    display: none;
    position: relative;
    top: 1px; /*brd*/ /*border-style: solid;*/ /*Changes by mayur*/
    }

    .rdHTitlebar .rdTitlebar
    {
    height: 25px;
    border-width: 0 0 1px;
    }

    .RadDock.rdCollapsed .rdHTitlebar .rdTitlebar
    {
    padding-bottom: 0px; /*brd - title brd*/
    }

    .RadDock .rdVTitlebar .rdTitlebar
    {
    left: 1px;
    width: 22px;
    border-width: 0 1px 0 0;
    }

    .RadDock .rdTitle
    {
    font: normal 12px "Segoe UI" , Arial, Sans-serif;
    line-height: 24px;
    }

    .rdHTitlebar .rdTitlebar, .rdVTitlebar .rdTitlebar
    {
    display: block;
    }

    .rdVTitlebar .rdTitlebar
    {
    position: absolute;
    overflow: hidden;
    }

    .rdTitlebar .rdTitle
    {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    font-style: normal;
    }

    .rdTitlebar .rdCommands
    {
    position: absolute;
    display: block;
    z-index: 2;
    right: 0;
    }

    .rdRtl .rdTitlebar .rdCommands
    {
    right: auto;
    left: 0;
    }

    .rdHTitlebar .rdTitlebar .rdCommands
    {
    top: 0;
    }
    .rdVTitlebar .rdTitlebar .rdCommands
    {
    bottom: 0;
    }

    .rdTitlebar .rdCommands a
    {
    display: block;
    overflow: hidden;
    text-indent: -3333px;
    cursor: default;
    }
    .rdHTitlebar .rdTitlebar .rdCommands a
    {
    float: right;
    height: 40px !important;
    margin: 0 !important;
    }

    .rdRtl .rdHTitlebar .rdTitlebar .rdCommands a
    {
    float: left;
    }

    * html .rdTitlebar .rdCommands a
    {
    display: inline-block;
    }
    /* inner container */

    .rdContent
    {
    overflow: auto;
    }
    /*IE6 overflow fix*/
    * html .rdContent
    {
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    }
    * html .rdWGripLeft .rdContent, * html .rdWGripRight .rdContent, * html .rdVTitlebar .rdContent
    {
    width: auto;
    }

    .rdCollapsed .rdContent
    {
    display: none;
    }

    /* grips */
    .rdGripTop, .rdGripLeft
    {
    display: none;
    font-size: 1px;
    line-height: 1px;
    }

    .rdWGripTop .rdGripTop, .rdWGripLeft .rdGripLeft
    {
    display: block;
    }

    .rdGripTop
    {
    width: 100%;
    overflow: hidden;
    }

    .rdGripLeft
    {
    position: absolute;
    height: 100%;
    }

    /* dragging */
    .rdDraggable
    {
    cursor: move;
    }

    /* float clearing */
    .clear
    {
    clear: both;
    height: 1px;
    margin-bottom: -1px;
    visibility: hidden;
    }

    /* temporary wrapping table classes */
    .rdWrapTable .rdTopLeft, .rdWrapTable .rdTopCenter, .rdWrapTable .rdTopRight, .rdWrapTable .rdLeftMiddle, .rdWrapTable .rdRightMiddle, .rdWrapTable .rdBottomLeft, .rdWrapTable .rdBottomCenter, .rdWrapTable .rdBottomRight
    {
    padding: 0;
    margin: 0;
    font-size: 1px;
    line-height: 1px;
    }

    .rdCenter, .rdLeftMiddle, .rdRightMiddle
    {
    vertical-align: top;
    height: 100%;
    }

    .rdWrapTable .rdTopBorder, .rdWrapTable .rdCenter, .rdWrapTable .rdContent
    {
    border: 0 !important;
    top: 0px !important;
    }

    .rdWrapTable .rdTitlebar
    {
    top: 0 !important;
    }

    .rdWrapTable .rdTitlebar
    {
    margin: 0 !important;
    }
    /* temporary wrapping table classes */

    .rdWrapTable .rdGripTop
    {
    top: 0px !important;
    }

    .RadDockZone
    {
    padding: 4px;
    }

    .rdHTitlebar .rdTitle
    {
    padding-left: 10px;
    }

    .rdVTitlebar .rdTitle
    {
    padding: 13px 0 0 8px;
    line-height: 1.4em;
    border: 1px solid;
    }

    .RadDock_Vista .rdVTitlebar .rdTitle
    {
    background-repeat: repeat-y;
    }

    .rdTitlebar .rdCommands a
    {
    width: 19px;
    height: 19px;
    background-repeat: no-repeat;
    margin: 3px 0 0 0 !important;
    }

    .rdCollapse
    {
    background-position: 0 0;
    }

    .rdExpand
    {
    background-position: 0 -19px;
    }

    .rdClose
    {
    background-position: 0 -76px;
    }

    .rdPin
    {
    background-position: 0 -57px;
    }

    .rdUnpin
    {
    background-position: 0 -38px;
    }

    .rdCustom
    {
    background-position: 0 -95px;
    }

    .rdContent
    {
    top: 1px; /* brd */
    padding-bottom: 1px; /* brd */
    font: normal 11px "Segoe UI" , Arial, Sans-serif;
    cursor: default;
    }

    .rdVTitlebar .rdContent
    {
    margin-left: 24px;
    }

    .rdGripTop
    {
    top: 1px; /* brd */
    height: 3px;
    }

    .rdGripLeft
    {
    left: 1px; /*brd*/
    width: 3px;
    }

    .rdWGripLeft .rdContent
    {
    margin-left: 3px;
    }

    .rdTopLeft, .rdTopRight, .rdBottomLeft, .rdBottomRight, .rdLeftMiddle, .rdRightMiddle
    {
    height: 3px;
    width: 3px;
    line-height: 3px;
    }

    .rdTopCenter, .rdBottomCenter
    {
    height: 3px;
    line-height: 3px;
    }

    .rdWrapTable .rdTitlebar, .rdWrapTable .rdTitle, .rdWrapTable .rdCommands
    {
    background-repeat: repeat-x;
    }

    .rdWrapTable .rdCommands
    {
    margin-top: 1px;
    }

    .rdWrapTable .rdSideBorders.rdHTitlebar
    {
    border: 0 !important;
    }
    /*END BASE STYLE*/





    Thanks in advance,
    Mayur 
  2. Jim
    Jim avatar
    31 posts
    Member since:
    Jun 2009

    Posted 29 Oct 2009 Link to this post

    This CSS class ".rdSideBorders" controls the appearance of the dock's borders.

    I guess you know that there is border-right CSS attribute.

    In this project the right-border is hidden:

    <%@ 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"
            .rdSideBorders 
            { 
                border-right: 0 !important; 
            } 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
        <div> 
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server"
                <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px"
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title"
                        <ContentTemplate> 
                            <br /> 
                            <br /> 
                            <br /> 
                            <br /> 
                            <br /> 
                            CONTENT 
                            <br /> 
                            <br /> 
                            <br /> 
                            <br /> 
                            <br /> 
                        </ContentTemplate> 
                    </telerik:RadDock> 
                </telerik:RadDockZone> 
            </telerik:RadDockLayout> 
        </div> 
        </form> 
    </body> 
    </html> 
     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top