Unwanted solid line border appearing after upgrading from 2008.2.1001.35 to 2012.1.215.40

5 posts, 0 answers
  1. Midas
    Midas avatar
    5 posts
    Member since:
    Sep 2011

    Posted 14 Mar 2012 Link to this post

    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
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 16 Mar 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Midas
    Midas avatar
    5 posts
    Member since:
    Sep 2011

    Posted 19 Mar 2012 Link to this post

    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
  5. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 22 Mar 2012 Link to this post

    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.
  6. Midas
    Midas avatar
    5 posts
    Member since:
    Sep 2011

    Posted 22 Mar 2012 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017