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

RadMenu disappears on width change

7 Answers 110 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Matthew asked on 14 Feb 2012, 05:15 PM
I am trying to make the RadMenu stretch to the width of the body of the page, however, when I change the width to 100%, the menu does stretch but the menu items disappear and the height of the menu become almost 0px. How do I set the width without this happening or is this a bug?

7 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 14 Feb 2012, 11:00 PM
Matthew:

Have you applied a skin to your RadMenu? It might be helpful in diagnosing the cause of your behavior if we could see your .aspx markup, including any css.

And, in the case where you have defined the skin, does the same behavior occur with the default skin?

Regards.
0
Matthew
Top achievements
Rank 1
answered on 14 Feb 2012, 11:53 PM
Yes I have applied the Windows 7 Skin to it, and have tried the width sizing using the Default skin and both are doing the same thing. Below is the HTML markup of just the body since there is a bunch of javascript for business use above it that is useless in this topic. The RadMenu is call "radMainMenu"
<body onload="updateClock(); setInterval('updateClock()', 1000)">
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager1" runat="server"
                                  EnableTheming="True">
            <scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI"
                                     Name="Telerik.Web.UI.Common.Core.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI"
                                     Name="Telerik.Web.UI.Common.jQuery.js">
                </asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI"
                                     Name="Telerik.Web.UI.Common.jQueryInclude.js">
                </asp:ScriptReference>
            </scripts>
        </telerik:RadScriptManager>
        <asp:SiteMapDataSource ID="srcMain" runat="server" ShowStartingNode="False" />
        <table align="center" cellspacing="0" style="width: 800px; border-bottom-width: 0px; border-left-width: 0px; border-top-width: 0px; border-right-width: 0px;">
            <tr>
                <td>
                    <asp:Image ID="imHeaderLogo" runat="server"
                               ImageUrl="~/Images/Header_Logos/ElectricBlue.png" />
                </td>
            </tr>
            <tr>
                <td>
                    <telerik:RadMenu Runat="server" ID="radMenuMain" DataSourceID="srcMain"
                                     EnableRoundedCorners="True" EnableShadows="True"
                        ViewStateMode="Enabled" Width="700px">
                    </telerik:RadMenu>
                    <table cellpadding="0" cellspacing="0" style="width: 100%;">
                        <tr>
                            <td style="width: 33%; text-align: left;">
                                <asp:Label ID="lblSalutations" runat="server" Font-Bold="True" Font-Names="Arial"
                                           Font-Size="X-Small" CssClass="XSmallLabels"></asp:Label>
                            </td>
                            <td style="width: 33%; text-align: center;">
                                <asp:Label ID="lblHeadliner" runat="server" Font-Bold="True" Font-Names="Arial"
                                           Font-Size="X-Small" CssClass="XSmallLabels"></asp:Label>
                            </td>
                            <td style="width: 33%; text-align: right;">
                                <asp:Label ID="lblTimer" runat="server" Font-Bold="True" Font-Names="Arial"
                                           Font-Size="X-Small" CssClass="XSmallLabels"></asp:Label>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:ContentPlaceHolder ID="mainContentPlaceHolder" runat="server"></asp:ContentPlaceHolder>
                </td>
            </tr>
            <tr>
                <td style="font-family: Arial; font-size: x-small; text-align: center;">
                    <IPAMOnlineSystem:masterFooter id="idFooter" runat="server" />
                </td>
            </tr>
        </table>
        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/blank.png" />
        <telerik:RadWindow runat="server" ID="radAlert" Animation="Resize"
            Behaviors="None" EnableShadow="True" Height="500px" KeepInScreenBounds="True"
            Modal="True" Overlay="True" Skin="Outlook" Width="500px"
            Title="PIT's New Features and Updates">
            <ContentTemplate>
            <div style="font-family:Arial;font-size:12px;">
                <asp:LinkButton ID="btnClose" runat="server" onclick="btnClose_Click">close</asp:LinkButton>
            </div>
            <div style="width:500px;font-family:Arial;">
                <div id="alertType" style="padding-left:7px;padding-top:21px;width:500px;font-size:12px;font-weight:bold;float:left;">
                    <asp:Label ID="alertTypelbl" runat="server" Text=""></asp:Label>
                </div>
                <div id="alertMessage" style="float:left;padding-top:7px;width:450px;font-size:10px;font-weight:normal;text-align:left;margin-left:21px;margin-right:auto;">
                    <asp:Label ID="alertMessagelbl" runat="server" Text=""></asp:Label>
                </div>
                <div id="updatesSectionHdr" style="width:450px;margin-top:7px;font-size:12px;font-weight:bold;margin-left:auto;margin-right:auto;">
                    <asp:Label ID="updatesHdr" runat="server" Text="Change List"></asp:Label>
                </div>
                <div style="width:450px;font-size:10px;padding-top:7px;margin-left:auto;margin-right:auto;">
                    <div style="width:300px;font-size:12px;font-weight:bold;float:left;clear:left;">
                        <asp:Label ID="updateList1Hdr" runat="server" Text="Reoccuring Events"></asp:Label>
                    </div>
                    <div style="width:400px;font-size:10px;font-weight:normal;padding:7 14;float:left;clear:left;">
                    </div>
                </div>
                <div style="width:450px;font-size:10px;padding:7 14;margin-left:auto;margin-right:auto;">
                    <div style="width:300px;font-size:12px;font-weight:bold;float:left;clear:left;">
                        <asp:Label ID="updateList2Hdr" runat="server" Text="Participants"></asp:Label>
                    </div>
                    <div style="width:400px;font-size:10px;font-weight:normal;padding:7 14;float:left;clear:left;">
                    </div>
                </div>
                <div style="width:450px;font-size:12px;padding:7 14;margin-left:auto;margin-right:auto;">
                    <div style="width:300px;font-size:10px;font-weight:bold;float:left;clear:left;">
                        <asp:Label ID="updateList3Hdr" runat="server" Text="Workshops"></asp:Label>
                    </div>
                    <div style="width:400px;font-size:10px;font-weight:normal;padding:7 14;float:left;clear:left;">
                    </div>
                </div>
                <div style="width:450px;font-size:10px;padding-top:14px;padding-left:14px;padding-bottom:21px;margin-left:auto;margin-right:auto;float:left;">
                </div>
            </div>
            </ContentTemplate>
        </telerik:RadWindow>
        <asp:ModalPopupExtender ID="radAlert_ModalPopupExtender" runat="server"
                                DynamicServicePath="" Enabled="True"
            TargetControlID="radAlert" Drag="True" DropShadow="True"
            CancelControlID="btnClose" ClientIDMode="AutoID">
        </asp:ModalPopupExtender>
    </form>
</body>
0
Richard
Top achievements
Rank 1
answered on 15 Feb 2012, 04:19 PM
Matthew:

Since you have not included your styles, it's still pretty tough to determine the cause for the odd behavior.

I would highly suggest that you open a support ticket with Telerik, so that they can provide informed insights in a timely manner. Forum posts are not recommended for time sensitive issues.

You should prepare a small, trimmed down version of your project that isolates and demonstrates the issue, including the styles that you apply. You can reference this blog post for instructions on doing this:

Isolating a problem in a sample project


Hope this helps!
0
Matthew
Top achievements
Rank 1
answered on 15 Feb 2012, 06:13 PM
I am not sure if I am understanding what you are saying. But, there are no custom styles or inline styles associated with this page, The only style I am referencing is the Telerik Windows 7 style from the dll.
0
Kate
Telerik team
answered on 16 Feb 2012, 05:49 PM
Hello Matthew,

I tested the code that you provided but I am not able to get the problematic behavior that you describe. Can you please, send us a simplified runnable project as suggested in the previous post, since I can not replicate the issue by using your code?

All the best,
Kate
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Madhuri
Top achievements
Rank 1
answered on 17 Feb 2012, 11:20 AM
Hello sir,

 In my Project I am using rad menu Control, I have so many menus and  I mentioned width is 100% . If the menu Name is Lengthy it will overlapped to next menu Item.so that i mentioned width for each and every menu Item.but still problem is there.
can you please suggest me how to solve that problem?


thanks in advance.
0
Richard
Top achievements
Rank 1
answered on 17 Feb 2012, 02:49 PM
Madhuri:

It's possible to wrap excessively long text on a RadMenu item. See the How to wrap menu item text forum thread for the method to use.

Regards,

Tags
Menu
Asked by
Matthew
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Matthew
Top achievements
Rank 1
Kate
Telerik team
Madhuri
Top achievements
Rank 1
Share this question
or