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

SideBorder Problem...

1 Answer 81 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Test
Top achievements
Rank 1
Test asked on 27 Oct 2009, 11:30 AM
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 

1 Answer, 1 is accepted

Sort by
0
Jim
Top achievements
Rank 1
answered on 29 Oct 2009, 10:03 AM
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> 
 
Tags
Dock
Asked by
Test
Top achievements
Rank 1
Answers by
Jim
Top achievements
Rank 1
Share this question
or