Menu cut off in Firefox and IE 8.0

19 posts, 0 answers
  1. Dan
    Dan avatar
    40 posts
    Member since:
    Mar 2009

    Posted 20 Aug 2009 Link to this post

    I have a long menu that works fine in IE 7.0 but gets cut off and does not scroll in Firefox 3 or IE 8.0.  It works in Compatibility Mode in IE 8.0.  Try the following url and click on the "books" menu item to see an example: http://store.families.org.au.

    I am using a custom skin with the following css file:

    /* <RadMenu / Default> */  
     
    .RadMenu_MyCustomSkin .rmRootGroup,  
    .RadMenu_MyCustomSkin .rmLink,  
    .RadMenu_MyCustomSkin .rmText,  
    .RadMenu_MyCustomSkin .rmLeftArrow,  
    .RadMenu_MyCustomSkin .rmRightArrow,  
    .RadMenu_MyCustomSkin .rmTopArrow,  
    .RadMenu_MyCustomSkin .rmBottomArrow  
    {  
    }  
     
    .RadMenu_MyCustomSkin .rmRootGroup  
    {  
        background-position: 0 -408px;  
    }  
     
    /* <Root items> */  
     
    .RadMenu_MyCustomSkin,  
    .RadMenu_MyCustomSkin .rmLink  
    {  
        font-family: Verdana, Arial, Helvetica, sans-serif;  
        font-size: 11px;  
        color: #5b3b23;  
        line-height: 10px;  
        text-decoration: none;  
        border-bottom-width: 1px;  
    }  
     
    .RadMenu_MyCustomSkin .rmLink,  
    .RadMenu_MyCustomSkin .rmDisabled,  
    .RadMenu_MyCustomSkin .rmDisabled:hover  
    {  
        background-position: 0 -72px;  
    }  
     
    .RadMenu_MyCustomSkin .rmText,  
    .RadMenu_MyCustomSkin .rmDisabled .rmText,  
    .RadMenu_MyCustomSkin .rmDisabled:hover .rmText  
    {  
        background-position: 100% -96px;  
    }  
     
    .RadMenu_MyCustomSkin .rmFirst .rmLink,  
    .RadMenu_MyCustomSkin .rmFirst .rmLink:hover,  
    .RadMenu_MyCustomSkin .rmLast .rmText,  
    .RadMenu_MyCustomSkin .rmLast .rmLink:hover .rmText,  
    .RadMenu_MyCustomSkin .rmVertical .rmLink,  
    .RadMenu_MyCustomSkin .rmVertical .rmText  
    {  
        background-repeat: no-repeat;  
        background-position: 0 500px;  
    }  
     
    .RadMenu_MyCustomSkin .rmVertical .rmFirst,  
    .RadMenu_MyCustomSkin .rmVertical .rmLast  
    {  
        background: none;  
    }  
     
    .RadMenu_MyCustomSkin .rmLink:hover,  
    .RadMenu_MyCustomSkin .rmFocused  
    {  
        color: #ad9d91;  
        text-decoration:none;  
        border-bottom-style: none;  
        border-bottom-style: dashed;  
        border-bottom-color: #FFFFFF;  
    }  
     
    .RadMenu_MyCustomSkin .rmVertical .rmLink  
    {  
        border-bottom-style: dashed;  
        border-bottom-color: #FFFFFF;  
        padding-top: 10px;  
        padding-bottom: 15px;  
    }  
     
    .RadMenu_MyCustomSkin .rmVertical .rmLast .rmLink  
    {  
        border-bottom-width: 0px;  
        border-bottom-style: none;  
    }  
     
    .RadMenu_MyCustomSkin .rmVertical .rmLink:hover,  
    .RadMenu_MyCustomSkin .rmVertical .rmFocused,  
    .RadMenu_MyCustomSkin .rmVertical .rmExpanded,  
    .RadMenu_MyCustomSkin .rmVertical .rmExpanded:hover  
    {  
    }  
     
    .RadMenu_MyCustomSkin .rmVertical .rmFirst .rmLink:hover,  
    .RadMenu_MyCustomSkin .rmVertical .rmFirst .rmFocused,  
    .RadMenu_MyCustomSkin .rmVertical .rmFirst .rmExpanded,  
    .RadMenu_MyCustomSkin .rmVertical .rmFirst .rmExpanded:hover  
    {  
    }  
     
    .RadMenu_MyCustomSkin .rmVertical .rmLast .rmLink:hover,  
    .RadMenu_MyCustomSkin .rmVertical .rmLast .rmFocused,  
    .RadMenu_MyCustomSkin .rmVertical .rmLast .rmExpanded,  
    .RadMenu_MyCustomSkin .rmVertical .rmLast .rmExpanded:hover  
    {  
    }  
     
    .RadMenu_MyCustomSkin .rmVertical .rmItem .rmDisabled:hover  
    {  
        padding-top: 1px;  
        padding-bottom: 1px;  
        border-width: 0;  
    }  
     
    .RadMenu_MyCustomSkin .rmExpanded,  
    .RadMenu_MyCustomSkin .rmExpanded:hover  
    {  
        background-color: #e3f3f4;  
        background-position: 0 -72px;  
    }  
     
    .RadMenu_MyCustomSkin .rmExpanded .rmText,  
    .RadMenu_MyCustomSkin .rmExpanded:hover .rmText  
    {  
        background-position: 100% -96px;  
    }  
     
    .RadMenu_MyCustomSkin .rmLast .rmExpanded .rmText  
    {  
        background-position: 0 500px;  
        background-repeat: no-repeat;  
    }  
     
    .RadMenu_MyCustomSkin .rmDisabled,  
    .RadMenu_MyCustomSkin .rmDisabled:hover  
    {  
        color: #7d7d7d;  
        background-color: transparent;  
    }  
     
    /* </Root items> */  
     
     
    /* <Submenu items> */  
     
    .RadMenu_MyCustomSkin .rmGroup,  
    .RadMenu_MyCustomSkin .rmGroup .rmVertical  
    {  
        background-color: #E7F5F5;  
    }  
     
    .RadMenu_MyCustomSkin .rmGroup .rmItem .rmLink  
    {  
        border-bottom-style: dashed;  
        border-bottom-color: #FFFFFF;  
        padding-top: 10px;  
        padding-bottom: 15px;  
    }  
     
    .RadMenu_MyCustomSkin .rmGroup .rmItem .rmLast .rmLink  
    {  
        border-bottom-style: none;  
    }  
     
    .RadMenu_MyCustomSkin .rmSlide .rmScrollWrap  
    {  
        background-image: none;  
    }  
     
    .RadMenu_MyCustomSkin_rtl .rmGroup,  
    .RadMenu_MyCustomSkin_rtl .rmGroup .rmVertical  
    {  
        background-position: 100% 0;  
    }  
     
    .RadMenu_MyCustomSkin .rmRootGroup li.rmItem .rmGroup  
    {  
        padding-bottom: 0;  
    }  
     
    .RadMenu_MyCustomSkin .rmRootGroup .rmHorizontal  
    {  
        background-image: none;  
    }  
     
    .RadMenu_MyCustomSkin .rmScrollWrap .rmVertical  
    {  
        border: 0;  
    }  
     
    .RadMenu_MyCustomSkin .rmGroup .rmItem .rmLink,  
    .RadMenu_MyCustomSkin .rmGroup .rmItem .rmLink:hover,  
    .RadMenu_MyCustomSkin .rmGroup .rmItem .rmFocused,  
    .RadMenu_MyCustomSkin .rmGroup .rmItem .rmExpanded  
    {  
    }  
     
    .RadMenu_MyCustomSkin .rmGroup .rmLast .rmLink,  
    .RadMenu_MyCustomSkin .rmGroup .rmLast .rmLink:hover,  
    .RadMenu_MyCustomSkin .rmGroup .rmLast .rmFocused,  
    .RadMenu_MyCustomSkin .rmGroup .rmLast .rmExpanded  
    {  
    }  
     
    .RadMenu_MyCustomSkin .rmGroup .rmLink,  
    .RadMenu_MyCustomSkin .rmGroup .rmText,  
    .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled,  
    .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled:hover,  
    .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled .rmText,  
    .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled:hover .rmText  
    {  
    }  
     
    .RadMenu_MyCustomSkin .rmGroup .rmLink:hover,  
    .RadMenu_MyCustomSkin .rmGroup .rmFocused,  
    .RadMenu_MyCustomSkin .rmGroup .rmExpanded  
    {  
        background-position: 0 -168px;  
    }  
     
    .RadMenu_MyCustomSkin .rmGroup .rmLink:hover .rmText,  
    .RadMenu_MyCustomSkin .rmGroup .rmFocused .rmText,  
    .RadMenu_MyCustomSkin .rmGroup .rmExpanded .rmText  
    {  
        background-position: 100% -192px;  
    }  
     
    /* <expand arrows> */  
     
    .RadMenu_MyCustomSkin .rmGroup .rmExpandRight,  
    .RadMenu_MyCustomSkin .rmGroup .rmExpandDown,  
    .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled .rmExpandRight,  
    .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled .rmExpandDown,  
    .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled:hover .rmExpandRight,  
    .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled:hover .rmExpandDown  
    {  
        background-position: 100% -216px;  
    }  
     
    .RadMenu_MyCustomSkin .rmGroup .rmLink:hover .rmExpandRight,  
    .RadMenu_MyCustomSkin .rmGroup .rmFocused .rmExpandRight,  
    .RadMenu_MyCustomSkin .rmGroup .rmExpanded .rmExpandRight,  
    .RadMenu_MyCustomSkin .rmGroup .rmLink:hover .rmExpandDown,  
    .RadMenu_MyCustomSkin .rmGroup .rmFocused .rmExpandDown,  
    .RadMenu_MyCustomSkin .rmGroup .rmExpanded .rmExpandDown  
    {  
        background-position: 100% -240px;  
    }  
     
    .RadMenu_MyCustomSkin .rmGroup .rmDisabled:hover .rmExpandRight,  
    .RadMenu_MyCustomSkin .rmGroup .rmDisabled:hover .rmExpandDown  
    {  
        background-position: 100% -216px;  
    }  
     
    /* </expand arrows> */  
     
    /* <rtl> */  
     
    .RadMenu_MyCustomSkin_rtl .rmLink  
    {  
        background-position: 100% -96px;  
    }  
     
    .RadMenu_MyCustomSkin_rtl .rmText  
    {  
        background-position: 0 -72px;  
    }  
     
    .RadMenu_MyCustomSkin_rtl .rmVertical .rmExpanded .rmText,  
    .RadMenu_MyCustomSkin_rtl .rmVertical .rmExpanded:hover .rmText  
    {  
        background-position: 0 500px;  
        background-repeat: no-repeat;  
    }  
     
    .RadMenu_MyCustomSkin_rtl .rmGroup .rmLink:hover,  
    .RadMenu_MyCustomSkin_rtl .rmGroup .rmFocused,  
    .RadMenu_MyCustomSkin_rtl .rmGroup .rmExpanded  
    {  
        background-position: 100% -264px;  
    }  
     
    .RadMenu_MyCustomSkin_rtl .rmGroup .rmLink:hover .rmText,  
    .RadMenu_MyCustomSkin_rtl .rmGroup .rmFocused .rmText,  
    .RadMenu_MyCustomSkin_rtl .rmGroup .rmExpanded .rmText  
    {  
        background-position: 0 -288px;  
    }  
     
    .RadMenu_MyCustomSkin_rtl .rmGroup .rmExpandLeft  
    {  
        background-position: 0 -312px;  
    }  
     
    .RadMenu_MyCustomSkin_rtl .rmGroup .rmLink:hover .rmExpandLeft,  
    .RadMenu_MyCustomSkin_rtl .rmGroup .rmFocused .rmExpandLeft,  
    .RadMenu_MyCustomSkin_rtl .rmGroup .rmExpanded .rmExpandLeft  
    {  
        background-position: 0 -336px;  
    }  
     
    /* </rtl> */  
     
    /* </Submenu items> */  
     
    /* <Submenu offsets (Default - specific, overlapping submenus)> */  
     
    .RadMenu_MyCustomSkin .rmSlide  
    {  
        margin: 0 0 0 -1px;  
    }  
     
    .RadMenu_MyCustomSkin .rmVertical .rmSlide,  
    .RadMenu_MyCustomSkin .rmSlide .rmSlide,  
    .RadMenu_MyCustomSkin_Context .rmGroup .rmSlide  
    {  
        margin: 0 0 0 0;  
    }  
     
    .RadMenu_MyCustomSkin_rtl .rmSlide  
    {  
        margin: 0 0 0 0;  
    }  
     
    .RadMenu_MyCustomSkin_rtl .rmFirst .rmSlide  
    {  
        margin-left: 1px;  
    }  
     
    .RadMenu_MyCustomSkin_rtl .rmVertical .rmSlide,  
    .RadMenu_MyCustomSkin_rtl .rmSlide .rmSlide,  
    .RadMenu_MyCustomSkin_Context_rtl .rmGroup .rmSlide  
    {  
        margin: 0 0 0 5px;  
    }  
     
    /* </Submenu offsets> */  
     
    /* <Scrolling arrows> */  
     
    .RadMenu_MyCustomSkin .rmLeftArrow,  
    .RadMenu_MyCustomSkin .rmRightArrow  
    {  
        background-color: #E6E6E6;  
    }  
     
    .RadMenu_MyCustomSkin .rmLeftArrow { background-position: -8px -312px; border-right: 1px solid #828282; }  
    .RadMenu_MyCustomSkin .rmRightArrow { background-position: -482px -216px; border-left: 1px solid #828282; }  
     
    .RadMenu_MyCustomSkin .rmTopArrow,  
    .RadMenu_MyCustomSkin .rmBottomArrow,  
    .RadMenu_MyCustomSkin .rmGroup .rmLeftArrow,  
    .RadMenu_MyCustomSkin .rmGroup .rmRightArrow  
    {  
        background-color: #E6E6E6;  
    }  
     
    .RadMenu_MyCustomSkin .rmTopArrow { background-position: 50% -367px; border-bottom: 1px solid #828282; }  
    .RadMenu_MyCustomSkin .rmBottomArrow { background-position: 50% -391px; border-top: 1px solid #828282; }  
     
    /* </Scrolling arrows> */  
     
    /* <Separators> */  
     
    .RadMenu_MyCustomSkin .rmHorizontal .rmSeparator .rmText,  
    .RadMenu_MyCustomSkin .rmVertical .rmHorizontal .rmSeparator .rmText  
    {  
        height: 22px;  
        margin: 1px 0 0;  
        width: 1px;  
        background-color: #A8A8A8;  
    }  
     
    .RadMenu_MyCustomSkin_Context .rmSeparator .rmText,  
    .RadMenu_MyCustomSkin .rmHorizontal .rmGroup .rmSeparator .rmText,  
    .RadMenu_MyCustomSkin .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText  
    {  
        background-color: transparent;  
        background-position: 0 -406px;  
    }  
     
    /* </Separators> */  
     
    /* </RadMenu / Default> */ 

    Here is the definition of the control:
                <telerik:RadMenu ID="RadMenu1" runat="server" DataNavigateUrlField="Url" DataSourceID="XmlDataSource1" 
                    DataTextField="Text" DataValueField="Text" EnableEmbeddedSkins="false" Flow="Vertical" 
                    Skin="MyCustomSkin" Width="183">  
                    <DefaultGroupSettings ExpandDirection="Right" Width="183" /> 
                </telerik:RadMenu> 
     

    Please let me know if there is something to fix this.

    Thanks.
    Dan

    P.S. Is there a way to show arrows at the top and bottom to show that there are more options to scroll through.
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 21 Aug 2009 Link to this post

    Hello Dan,

    Remove the "overflow:hidden" on the <table id="MiddleTable"> element.

    All the best,
    Alex
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dan
    Dan avatar
    40 posts
    Member since:
    Mar 2009

    Posted 21 Aug 2009 Link to this post

    That did it, thanks Alex.

    Now, how about the question of changing the "scroll bar" indicator at the top and bottom.  I would like to make it more noticeable by adding an arrow or something like that to indicate that there are more menu items.

    Thanks again.
  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 21 Aug 2009 Link to this post

    Hi Dan,

    The CSS classes for the top and bottom arrows are respectively rmTopArrow and rmBottomArrow.

    More information can be found in the RadMenu / CSS Skin File Selectors help article.

    Sincerely yours,
    Alex
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Dan
    Dan avatar
    40 posts
    Member since:
    Mar 2009

    Posted 17 Jun 2010 Link to this post

    I am raising this issue again.  A while ago I upgraded to the 2009.3.1208.35 version of the ASP.Net controls and now my menu is getting cut off again.  I have not changed my css class (shown above) or html code.  Could you tell me if there is something else that I have to do now?  You can see an example of the menu at http://store-global.quinix.com (hover over the books menu item, depending on your screen resolution you might have to restore the browser window down to a smaller size).

    Thanks.
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 18 Jun 2010 Link to this post

    Hello Dan,

    I'm not sure I follow your question - are you referring to the "cutting off" issue or to something else?

    All the best,
    Kamen Bundev
    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
  8. Dan
    Dan avatar
    40 posts
    Member since:
    Mar 2009

    Posted 18 Jun 2010 Link to this post

    Yes, the menus are getting cut off again.  Any help you can give would be appreciated.
  9. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 24 Jun 2010 Link to this post

    Hi Dan,

    Strange, I wasn't able to find why RadMenu is acting like this. Can you open a support ticket and send me a sample project with the menu extracted? I want to be able to test it thoroughly, thank you in advance. Be sure to mention this thread in the ticket.

    To activate the scrolling arrows, use the RadMenu attribute EnableAutoScroll="true".

    Greetings,
    Kamen Bundev
    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
  10. David
    David avatar
    11 posts
    Member since:
    Aug 2007

    Posted 08 Oct 2010 Link to this post

    Hi There,

    I just wanted to add that we too are having the same problem, though with context menus.  And, our menu does not work properly in IE7 or Firefox, i.e., it is 'cut off'.  I just viewed Dan's web site (that he referenced in one of his posts) and sure enough it is still mis-behaving.   We have tried setting the 'EnableAutoScroll', the 'EnableScreenBoundaryDetection' and the 'EnableRootItemScroll', all to no avail, i.e., setting any/all of them to True does not seem to do anything.    We even added an 'onClientShown' handler, where we check the 'height' of the menu, and if it is too tall, we set the sender.get_childListElement().parentNode.style.height to a better value, i.e., 500px.  We can 'see' the menu resize to a nice smaller size, but it then proceeds to automatically resize 'up' to its full height (too big to fit on screen).  So... any progress on this one?

    Thanks,

    -David
  11. Dan
    Dan avatar
    40 posts
    Member since:
    Mar 2009

    Posted 08 Oct 2010 Link to this post

    Hi David,

    I wanted to let you know that I did receive an answer to my support ticket that appears to work. The response only showed up in the ticket so I am reproducing it here ... hope it helps.
    Dan

    Posted on on Jun 25, 2010

    Hello Dan,

    Thank you for the project you've sent.

    Seems when EnableScreenBoundaryDetection is on and there's not enough space on the screen for the whole menu, RadMenu doesn't calculate its slide top position correctly. It doesn't seem to act the same with our skins though, so maybe it has something to do with the height of your menu items. We will investigate this issue further, as a workaround you can add this handler to your RadMenu OnClientItemOpening event in ctlMainNavigationBar.ascx:
    function clientOpening(sender, args) {
        var item = args.get_item();
        var slide = item._slide.get_element();
        var offsetTop = 0;

        for (el = item.get_linkElement(); (el = el.offsetParent);)
            if (el.offsetTop)
                offsetTop += el.offsetTop;

        setTimeout ( function () {
            if (~~slide.offsetTop < -offsetTop)
                slide.style.top = -offsetTop + "px";
        }, 1 );
    }

    I tested it and it works in Firefox and IE8. Let me know if it does for you. I've also updated your Telerik points for the report.

    Sincerely yours,
    Kamen Bundev
    the Telerik team
  12. David
    David avatar
    11 posts
    Member since:
    Aug 2007

    Posted 08 Oct 2010 Link to this post

    Thanks Dan,

    I put the code in as you suggested.  I am using a 'context menu', not a standard 'menu bar'.   It appears that the "onClientItemOpening" does not work with my stuff, as the JS function is never 'called'.  Thus, it doesn't work.

    I also am a bit confused by some of the syntax in the function they gave you, specifically, the line:
    if (~~slide.offsetTop < ....

    What do the ~~ characters mean/do? 

    Also, I visited your web site (the one you gave as an example, and it does not work correctly for me.  Have you put in the 'fix' to that site yet?

    -David
  13. David
    David avatar
    11 posts
    Member since:
    Aug 2007

    Posted 08 Oct 2010 Link to this post

    OK...I found out that since I am using a Context Menu, and not a regular menu bar, the onClientItemOpening event does not fire for me.   Nor does the onClientShowing.   The only event I get, I think, is the onClientShown event.   

    So, Telerik (Kamen Bundev), would you have a suggestion on an equivilent work-around function that would get my context menu working, i.e., the slide thing and the scroll arrows?

    Thank you,

    -David
  14. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 13 Oct 2010 Link to this post

    Hi David,

    ~~slide.offsetTop is almost equivalent to Math.floor(), check this article for more information about it.

    About your problem, can you send a live URL or a sample project where we can reproduce the issue you have and help you fix it (you can file a support ticket if you prefer the privacy)? We already did some fixes in our screen boundary detection routines for the latest service pack, can you also check if upgrading to Q2 2010 SP2 fixes your problem? Thank you in advance.

    All the best,
    Kamen Bundev
    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
  15. David
    David avatar
    11 posts
    Member since:
    Aug 2007

    Posted 13 Oct 2010 Link to this post

    Thanks Kamen, for the explanation of the ~~ operator.  I read the article... I now understand that aspect of things.

     

    As for providing you with a site to see this, I cannot do that.  Our web site is an internal, highly sensitive site, with no 'public' pages available.

    Also, our version is from Q3 2008, so we are quite a bit behind at this point, and we cannot simply 'upgrade' at this time. 

    I understand you cannot 'fix' what we have...but, I am hoping that you could provide some JS, similar to what you did for 'Dan', that would work for our Context menu.  Would this be possible?  The 'symtoms' are the same as what can be demo'd by Dan's web site.  The 'top' of the context menu is 'above' the top edge of the browser content area.  The bottom is fine.  There are no 'scroll arrows' visible, regardless of which properites (enableautoscroll, enablescreenboundarydetection, etc..) are used on the menu.

    We are using a 'modified' skin, but removing that and going with your default does not solve anything.

    Thanks,

    -David

  16. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 19 Oct 2010 Link to this post

    Hi David,

    I can probably provide you with a fix, but first I need to reproduce the issue here in order to work around it. If you can't share a live URL, can you at least open a support ticket and send a sample project with the issue isolated? I'm sorry for the inconvenience.

    Best wishes,
    Kamen Bundev
    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
  17. Mats
    Mats avatar
    66 posts
    Member since:
    Aug 2006

    Posted 22 Aug 2011 Link to this post

    Hi!

    What is status for this?
    I use RadContextMenu in IE9 (and FireFox) and if I have many items in the context menu then the top will be cut off exactly as in this post.
    I made a test in the Telerik demo for context menu to add many items in the context menu and could repeat this problem.

    Attached is an image showing the "cut off" behaviour. Is there a solution for this?

    Thanks
    /Mats
  18. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 26 Aug 2011 Link to this post

    Hi Mats,

    As a temporary solution, you could group the menu items in groups. Then if you set GroupSettings height, scrolling of the sub items will be possible. Other wise, the page will resize:
    <telerik:RadContextMenu runat="server" Height="400px">
        <Targets>
            <telerik:ContextMenuTagNameTarget TagName="img" />
        </Targets>
        <Items>
            <telerik:RadMenuItem Text="Set as desktop" GroupSettings-Height="500px">
                <Items>
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                    <telerik:RadMenuItem Text="Set as desktop" />
                    <telerik:RadMenuItem Text="Open in a new window" />
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Set as desktop" />
            <telerik:RadMenuItem Text="Open in a new window" />
            <telerik:RadMenuItem Text="Set as desktop" />
            <telerik:RadMenuItem Text="Open in a new window" />
            <telerik:RadMenuItem Text="Set as desktop" />
            <telerik:RadMenuItem Text="Open in a new window" />
        </Items>
    </telerik:RadContextMenu>

    I have logged this issue as in our tracking system. When it's ready, we'll include it in the release notes

    Regards,
    Ivan Zhekov
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  19. Tuhin Ghosh
    Tuhin Ghosh avatar
    8 posts
    Member since:
    May 2010

    Posted 20 Dec 2011 Link to this post

    Following is the javascript code where I am adding few items in existing rad context menu i.e. RadMenu1. There are few items already in it and I am adding few more items dynamically in javascript

    function ContextMenuOpen(sender, args) 
    {
       
    var menu = $find("m_c_RadMenu1");
       
    if (IsMobileBrowser() == false)
       
    {
           
    var evt = args.get_domEvent();
       
    }
        menu
    .trackChanges();
       
    var items = menu._getAllItems()
        menu
    .get_items().clear();

       
    //menu.commitChanges();
       
    AddItem("Visit & View Details", "a");

       
    if (selectedRow.findElement("lblTask") != null) {
           
    var tasklist = selectedRow.findElement("lblTask").defaultValue;
           
    var taskArray = tasklist.split(',');

           
    for (i = 0; i < taskArray.length; i++) {
               
    if (typeof (taskArray[i].split('~')[1]) == 'undefined') break;
               
    AddItem("Perform " + taskArray[i].split('~')[1], taskArray[i].split('~')[0]);
           
    }
           
    //rb.AddItem(selectedRow.findElement("lblTask").innerText,4)
       
    }
       
    AddItem("Log an Incident", "b");
       
    if (rb.isLocationSelected == false) {

       
    AddItem("Log a Discrepancy", "c");
    }


    function AddItem(text, value) {
       
    var menu = rb.GetMenu();
       
    var item = rb.GetContextMenuItem(text);
       
    if (item != null) return false;
       
    var menuItem = new Telerik.Web.UI.RadMenuItem();
        menuItem
    .set_text(text);
        menuItem
    .set_value(value)
        menu
    .trackChanges();
        menu
    .get_items().add(menuItem);
        menu
    .commitChanges();
       
    return true;
    }

    Everything goes well , but the newly added context menu shows transparent background on rightside , I found it is filling the background only at the area where text is present , on empty area at rightside it is transparent (see attached image )

    see the transparent background, right side of the items

    do anybody know how to remove this transparent background?

  20. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 20 Dec 2011 Link to this post

    Hi Tuhin,

    Please refer to the following forum post where I have just answered your question:
    http://www.telerik.com/community/forums/aspnet-ajax/menu/adding-items-to-telerik-radcontextmenu-showing-transparent-background.aspx

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