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

Menu cut off in Firefox and IE 8.0

18 Answers 254 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Dan asked on 21 Aug 2009, 02:41 AM
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.

18 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 21 Aug 2009, 02:33 PM
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.
0
Dan
Top achievements
Rank 1
answered on 21 Aug 2009, 02:54 PM
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.
0
Alex Gyoshev
Telerik team
answered on 21 Aug 2009, 03:18 PM
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.
0
Dan
Top achievements
Rank 1
answered on 17 Jun 2010, 11:15 PM
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.
0
Kamen Bundev
Telerik team
answered on 18 Jun 2010, 09:49 AM
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
0
Dan
Top achievements
Rank 1
answered on 18 Jun 2010, 04:06 PM
Yes, the menus are getting cut off again.  Any help you can give would be appreciated.
0
Kamen Bundev
Telerik team
answered on 24 Jun 2010, 12:56 PM
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
0
David
Top achievements
Rank 1
answered on 08 Oct 2010, 10:08 PM
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
0
Dan
Top achievements
Rank 1
answered on 08 Oct 2010, 10:17 PM
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
0
David
Top achievements
Rank 1
answered on 08 Oct 2010, 10:54 PM
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
0
David
Top achievements
Rank 1
answered on 08 Oct 2010, 11:22 PM
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
0
Kamen Bundev
Telerik team
answered on 13 Oct 2010, 04:12 PM
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
0
David
Top achievements
Rank 1
answered on 13 Oct 2010, 06:29 PM

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

0
Kamen Bundev
Telerik team
answered on 19 Oct 2010, 07:46 AM
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
0
Mats
Top achievements
Rank 1
answered on 22 Aug 2011, 12:59 PM
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
0
Ivan Zhekov
Telerik team
answered on 26 Aug 2011, 06:45 AM
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 >>

0
Tuhin Ghosh
Top achievements
Rank 1
answered on 20 Dec 2011, 09:52 AM

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?

0
Kate
Telerik team
answered on 20 Dec 2011, 11:27 AM
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
Tags
Menu
Asked by
Dan
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Dan
Top achievements
Rank 1
Kamen Bundev
Telerik team
David
Top achievements
Rank 1
Mats
Top achievements
Rank 1
Ivan Zhekov
Telerik team
Tuhin Ghosh
Top achievements
Rank 1
Kate
Telerik team
Share this question
or