Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Unwanted solid line border appearing after upgrading from 2008.2.1001.35 to 2012.1.215.40

4 Answers 37 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Midas
Top achievements
Rank 1
Midas asked on 14 Mar 2012, 06:01 AM
RadDock-on-Default---Before-Upgrade-v2008-2-1001-35.PNG
RadDock-on-Default---After-Upgrade-v2012-1-215-40---Unexpected-borders.PNG
Hi,

I just upgraded from 2008.2.1001.35 to 2012.1.215.40 version of Telerik.Web.UI.dll and noticed that a new solid line border is appearing on my RadDock controls. Please see before and after screenshot attachments (I have crossed out some information to protect the privacy).

Note:
- I am running my app on IE7.
- The project has been upgraded from VS2008 to VS2010
- The driving force for the upgrade/update of the control is to resolve the encountered JavaScript error. Error was resolved after the upgrade.

Any idea why?

Cheers,
Midas

4 Answers, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 16 Mar 2012, 10:34 AM
Hi Midas,

Indeed, the design of RadDock has changed since the release that you used previously, as the control was developed and enhanced during this period.  It is still possible to achieve the old look by removing the borders and the background of the titlebar via few CSS modifications. Such an approach is shown in the example below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <style type="text/css">
        /* this will remove the background images that create the border */
        .rdTop .rdLeft, .rdTop .rdRight, .rdMiddle .rdLeft, .rdMiddle .rdRight, .rdBottom
        {
            display: none;
        }
         
        /* this will remove the title background and will apply to it a color of your choosing */
        .rdTop .rdCenter
        {
            background-image: none !important;
            background-color: Black;
        }
 
         
        /* Setting custom background colour to Dock content */
        .RadDock table.rdTable tr.rdMiddle td.rdCenter .rdContent
        {
            background-color: grey !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="Scriptmanager1" runat="server" />
    <div>
        <telerik:RadDock runat="server" ID="RadDock1" Height="200px" Skin="Simple">
        </telerik:RadDock>
    </div>
    </form>
</body>
</html>

Note that such modifications of the default skin of RadDock are not supported, as they are not fully tested and could lead to an unexpected appearance in some cases. Even if we try to provide some help, It is a developer`s responsibility to ensure that the controls will work properly after such a customization.

I hope this helps. Feel free to contact us again if you run into more difficulties.

Greetings,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Midas
Top achievements
Rank 1
answered on 20 Mar 2012, 04:27 AM

Hi Slav,

Thanks for your reply. That clarified things a bit. Sorry, I should have mentioned that I am currently using a custom skin. So, it seem that the new version is not using my custom skin.

XHTML

<telerik:RadDockZone ID="_centerDockZone" runat="server">
    <telerik:RadDock ID="_InfoDock" runat="server" EnableEmbeddedSkins="false"
            Skin="XYZ" ForbiddenZones="_rightDockZone" Title="Last Known Info" Pinned="True"
            DefaultCommands="None">
        <ContentTemplate>
            <uc1:MyUserControlInfo ID="MyUserControlInfo" runat="server" />
        </ContentTemplate>
     </telerik:RadDock>
</telerik:RadDockZone>

Here is my Dock.XYZ.css located on App_Themes/XYZ

.RadDockZone_XYZ
{
    background-color: Transparent;
}
  
*>.RadDockZone_XYZ.rdVertical /* hidden from IE6 */
{
    padding-right:5px;
}
  
.RadDockZone_XYZ .rdPlaceHolder
{
    border-color:#739600;
}
  
.RadDock_XYZ
{
    padding: 5px 0px 5px 0px;
    text-align:left;
}
  
.RadDock_XYZ .rdTopBorder,
.RadDock_XYZ .rdSideBorders,
.RadDock_XYZ .rdBottomBorder
{
    border-style: solid;
    border-color: #F0F0F0;
}
.RadDock_XYZ .rdSideBorders
{
    border-width: 0px;
}
.RadDock_XYZ .rdTopBorder
{
    border-width: 0px;
}
.RadDock_XYZ .rdBottomBorder
{
    border-width: 0px;
}
  
.RadDock_XYZ .rdTitlebar
{
    top: 0px; /*brd*/
    border:solid 1px #0a0a0a;
}
  
.RadDock_XYZ .rdHTitlebar .rdTitlebar
{
    height:22px;
    background:#F5F5F5 url(Dock/TitlebarHLeft.gif) no-repeat;
    border-width: 0px;
}
  
.RadDock_XYZ .rdCollapsed .rdHTitlebar .rdTitlebar
{
    padding-bottom:0px; /*brd - title brd*/
}
  
.RadDock_XYZ .rdVTitlebar .rdTitlebar
{
    left:1px;
    width:24px;
    background:#F5F5F5 url(Dock/TitlebarVTop.gi_) no-repeat;
    border-width:0 1px 0 0;
}
  
.RadDock_XYZ .rdTitle
{
    font:bold 11px verdana;
    color: Gray;
}
  
.RadDock_XYZ .rdHTitlebar .rdTitle
{
    margin-top: 4px;
    margin-left: 10px;
    margin-right: 5px;
    text-overflow: ellipsys;
}
  
.RadDock_XYZ .rdVTitlebar .rdTitle
{
    padding:13px 0 0 8px;
    background:#F5F5F5 url(Dock/TitlebarV.gi_) repeat-y;
    line-height:1.4em;
}
  
.RadDock_XYZ .rdTitlebar .rdCommands
{
    right: 4px;
}
  
.RadDock_XYZ .rdHTitlebar .rdCommands a
{
    margin:4px 0 0 0;
}
.RadDock_XYZ .rdVTitlebar .rdCommands a
{
    margin:0 4px 0 0;
}
  
.RadDock_XYZ .rdTitlebar .rdCommands a
{
    height: 21px;
    width: 29px;
}
  
.RadDock_XYZ .rdCollapse
{
    background:url(Dock/Collapse.gif) no-repeat;
}
.RadDock_XYZ .rdCollapse:hover
{
    background:url(Dock/CollapseHover.gif) no-repeat;
}
  
.RadDock_XYZ .rdExpand
{
    background:url(Dock/Expand.gi_) no-repeat;
}
.RadDock_XYZ .rdExpand:hover
{
    background:url(Dock/ExpandHover.gi_) no-repeat;
}
  
.RadDock_XYZ .rdClose
{
    background:url(Dock/Close.gif) no-repeat;
}
.RadDock_XYZ .rdClose:hover
{
    background:url(Dock/CloseHover.gif) no-repeat;
}
  
.RadDock_XYZ .rdPin
{
    background:url(Dock/Pin.gi_) no-repeat;
}
.RadDock_XYZ .rdPin:hover
{
    background:url(Dock/PinHover.gi_) no-repeat;
}
  
.RadDock_XYZ .rdUnpin
{
    background:url(Dock/Unpin.gi_) no-repeat;
}
.RadDock_XYZ .rdUnpin:hover
{
    background:url(Dock/UnpinHover.gi_) no-repeat;
}
  
.RadDock_XYZ .rdCustom
{
    background:url(Dock/Custom.gi_) no-repeat;
}
.RadDock_XYZ .rdCustom:hover
{
    background:url(Dock/CustomHover.gi_) no-repeat;
}
  
.RadDock_XYZ .rdContent
{
    font:11px verdana;
    color: Black;
    background-color: #FBFBFB;
    line-height: 17px;
}
  
.RadDock_XYZ .rdVTitlebar .rdContent
{
    margin-left:24px;
}
  
.RadDock_XYZ .rdGripTop,
.RadDock_XYZ .rdGripLeft
{
    background:#4bb906;
}
  
.RadDock_XYZ .rdGripTop
{
    top:1px; /*brd*/
    height:3px;
}
.RadDock_XYZ .rdGripLeft
{
    left:1px; /*brd*/
    width:3px;
}
  
.RadDock_XYZ .rdWGripLeft .rdContent
{
    margin-left:3px;
}
  
/* resizable dock */
.RadDock_XYZ .rdTopLeft,
.RadDock_XYZ .rdTopRight,
.RadDock_XYZ .rdBottomLeft,
.RadDock_XYZ .rdBottomRight,
.RadDock_XYZ .rdLeftMiddle,
.RadDock_XYZ .rdRightMiddle
{
    height: 3px;
    width: 3px;
    line-height: 3px;
    background: #4bb906;
}
  
.RadDock_XYZ .rdTopCenter, 
.RadDock_XYZ .rdBottomCenter 
{
    background: #4bb906;
    height: 3px;
    line-height: 3px;
}

Cheers,
Midas
0
Slav
Telerik team
answered on 22 Mar 2012, 02:47 PM
Hi Midas,

Indeed, it appears that your custom skin is based on the old rendering of RadDock. Nevertheless, you can still achieve the desired appearance by using the solution, suggested in my previous post. The help article Tutorial: Creating a Custom Skin is also a useful resource that describes the creation of custom skins for the RadDock control.

Kind regards,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Midas
Top achievements
Rank 1
answered on 22 Mar 2012, 10:24 PM
Hi Slav,

Thanks for your reply. I was actually reading that page. Anyway, I actually end up using the "Transparent" embedded skin on my RadDockLayout and removed the border with BorderStyle="None" on my RadDockZone to achieve similar effect. So, my new layout looks something like:

<telerik:RadDockLayout ID="_dockLayout" runat="server" StoreLayoutInViewState="True" EnableEmbeddedSkins="true" Skin="Transparent">
    <telerik:RadDockZone ID="_centerDockZone" runat="server" BorderStyle="None">
        <telerik:RadDock ID="_InfoDock" runat="server" ForbiddenZones="_rightDockZone" Title="Last Known Info" Pinned="True" DefaultCommands="None">
            <ContentTemplate>
                <uc1:MyUserControlInfoID="MyUserControlInfo" runat="server" />
            </ContentTemplate>
        </telerik:RadDock>
    </telerik:RadDockZone>
</telerik:RadDockLayout>

Thanks again for your help.

Cheers,
Midas
Tags
Dock
Asked by
Midas
Top achievements
Rank 1
Answers by
Slav
Telerik team
Midas
Top achievements
Rank 1
Share this question
or