Telerik Forums / UI for ASP.NET AJAX Forum / Menu /

RadMenu disappears on width change

Telerik UI for ASP.NET AJAX
Resources Buy Try

8 posts, 0 answers

Matthew

25 posts

Member since:
Aug 2011

Posted 14 Feb 2012 Link to this post

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?
Richard

479 posts

Member since:
Nov 2011

Posted 14 Feb 2012 Link to this post

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.
Matthew

25 posts

Member since:
Aug 2011

Posted 14 Feb 2012 Link to this post

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>
Richard

479 posts

Member since:
Nov 2011

Posted 15 Feb 2012 Link to this post

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!
Matthew

25 posts

Member since:
Aug 2011

Posted 15 Feb 2012 Link to this post

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.
Kate
Admin

1898 posts

Posted 16 Feb 2012 Link to this post

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 >>
Madhuri

11 posts

Member since:
Feb 2012

Posted 17 Feb 2012 Link to this post

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.
Richard

479 posts

Member since:
Nov 2011

Posted 17 Feb 2012 Link to this post

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,

RadMenu disappears on width change

Matthew

Richard

Matthew

Richard

Isolating a problem in a sample project

Matthew

Kate

Madhuri

Richard