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

RadDocZone and VS 2010 ASP.NET project template menu problem

2 Answers 69 Views
Dock
This is a migrated thread and some comments may be shown as answers.
KJRB
Top achievements
Rank 1
KJRB asked on 07 Sep 2010, 06:15 PM
I created a ASP.NET project that uses VS 2010 template. The project pages use the default Site,Master and the default CSS that comes with VS 2010. When I add the code below (which is a copy of the code supplied with Telerik Demos) to a content in a web form page (that uses the master page) the menu disappears. The control that's causing the menu disappear is: RadDockZone. I can reproduce the problem by creating a new project and adding the code below to a page (or just a raddoclayout and raddockzone).

Would anybody have any suggestions how to fix the problem. I can guess that it's CSS issue but do not have much time (not now) for trying to find out what is going on. Workaround could be anything as long as the menu shows up and the rad dock demo code works.

Thanks

<telerik:RadScriptManager ID="ScriptManager" runat="server">
</telerik:RadScriptManager>
    <telerik:RadFormDecorator ID="RadFormDecorator1" DecoratedControls="All" runat="server" DecorationZoneID="ConfiguratorContainer1"/>
    <telerik:RadDockLayout runat="server" ID="RadDockLayout1">
        <table>
            <tr>
                <td style="vertical-align: top">
                    <telerik:RadDockZone ID="RadDockZone2" runat="server" Orientation="Vertical" Width="250px"
                        MinHeight="200px">
                        <telerik:RadDock ID="RadDock1" runat="server" Title="Blogs" Width="250px" EnableAnimation="true"
                            EnableRoundedCorners="true" Resizable="true">
                            <ContentTemplate>
                                aaa
                            </ContentTemplate>
                        </telerik:RadDock>
                    </telerik:RadDockZone>
                </td>
                <td style="vertical-align: top">
                    <telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Vertical" Width="560px"
                        MinHeight="200px">
                        <telerik:RadDock ID="RadDock2" runat="server" Title="News" Width="250px" EnableAnimation="true"
                            EnableRoundedCorners="true" Resizable="true">
                            <ContentTemplate>
                                bbbb
                            </ContentTemplate>
                        </telerik:RadDock>
                    </telerik:RadDockZone>
                </td>
            </tr>
        </table>
        </telerik:RadDockLayout>

2 Answers, 1 is accepted

Sort by
0
KJRB
Top achievements
Rank 1
answered on 09 Sep 2010, 04:15 AM
It did not look like many people got problem with it. There were no replies or comments from Telerik Team. So, I started digging and was able to find out what it was and was able to fix it. This is what I found out.

The offending Css file is:
<link href="/WebResource.axd?d=a1XmATyf4Tsx50uhIp2sPApCnfGxoDfMKX50qpDlrmTJX4QNGjffJftZsNHwU3e_0&t=634145324960000000" type="text/css" rel="stylesheet" class="Telerik_stylesheet" />

The offending css style is:

 

.clear { margin-bottom: -1px; height: 1px; visibility: hidden; clear: both; }

The problem is the name “.clear”. All classes in that Telerik CSS file are named “RadDoc” + something, or “rd” + something. With that one exception: “.clear”. The Site.css file in VS 2010 templates also include class “.clear” which is defined like this:

{ clear: both; }

The fix that I came up with for now, is to rename the Site.css class to .clearTelerik. Being sarcastic here, but the issue caused me some grief. It was an unnecessary obstacle. I am supposed to build functionality, not troubleshoot controls :-).
Next there are 2 changes in Site.css that need to be made. You should see them here. Look for .clearTelerik :-).

<div class="header">
            <div class="title">
                <h1>
                    My ASP.NET Application
                </h1>
            </div>
            <div class="loginDisplay">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                        [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
            <div class="clearTelerik hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                    </Items>
                </asp:Menu>
            </div>
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clearTelerik">
        </div>
    </div>
    <div class="footer">

I am trying not to be too sarcastic .. but if one tries to be fair .. I think that naming a css  class  ".clear" and including it with control that is intended for wide distribution is somethign that QA should have caught. I use Telerik controls often and I like them. I have a big respect for the company. But, this is one of those things that make you think .. that maybe things get rushed out.

I have tested my fix on just one page .. so I cannot say that it is rock solid but it  should be all that is needed to fix the problem. Rushing too .. it's late already.

0
Pero
Telerik team
answered on 10 Sep 2010, 12:11 PM
Hello,

Thank you very much for bringing this issue to our attention. I reproduced it locally, and indeed the RadDock outputs the following css:
.clear
{
    clear: both;
    height: 1px;
    margin-bottom: -1px;
    visibility: hidden;
}

I will log this issue in our PITS (Public Issue Tracking System), and we will do our best to resolve it for some of the upcoming releases.
You can track the progress of the issue on the following address: http://www.telerik.com/support/pits.aspx#/public/aspnet-ajax/3401.

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
Tags
Dock
Asked by
KJRB
Top achievements
Rank 1
Answers by
KJRB
Top achievements
Rank 1
Pero
Telerik team
Share this question
or