RadMenu disappears on width change

8 posts, 0 answers
  1. Matthew
    Matthew avatar
    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?
  2. jumpstart
    jumpstart avatar
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Matthew
    Matthew avatar
    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>
  5. jumpstart
    jumpstart avatar
    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!
  6. Matthew
    Matthew avatar
    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.
  7. Kate
    Admin
    Kate avatar
    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 >>
  8. Madhuri
    Madhuri avatar
    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.
  9. jumpstart
    jumpstart avatar
    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,

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017