Thank you for looking into this.  I will have to look at what you have regarding the missing fourth item in the menu.  Did you happen to look at the Sandbox example I attached in the OP?  It had all the issues I mentioned.  I had the problem in that sample which is as basic as it gets.

As to the other issues. You mention editting the weddatamenu.css directly.  Where might I find that and how might I include that in my project so that the each other developers will not have to make this change, too?  Also will I have to overwrite this css each time we get a new version of Infragistics?

I think I should be able to generate what is needed without the inline ASP.NET.   So this issue could be avoided.

What are the other css classes that are available for the WebDataMenu?  For example the sample you gave handles the Root level, but not the child level.  I guessed at replacing root with child but that did not seem to do the trick.  Is there a reference that lists all of css classes that you use for a particular control?

I have figured out what appears to be the reason behind the "missing" last element.  I am trying to add font-weight: bold to your .test css class but this is the style that seems to cause the "missing" last element. See attached page.

Any ideas on how to deal with this one?

I can work around this by using the class you mentioned above (igdm_MenuItemHorizontalRootLink) instead.  However it is strange that it would act that way using regular CSS class.

What are the other css classes that are available for the WebDataMenu?  For example the sample you gave handles the Root level, but not the child level.  Is there a reference that lists all of css classes that you use for a particular control?

After delving into the Source I was able to determine that it is the "igdm_MenuItemVerticalLink" and "igdm_MenuItemVertical" css classes that I needed to override for the menu items.

In the next post I will detail the issues with the solutions so that all answers are in one place.

Issues 1: To a horizontal menu, added 4 root menu items and made the third root menu item have 2 child menu items.  The 4th item does not show up - there seems to be space for it, but hovering or clicking does nothing and the words for the menu item do appear to show up at all. This was caused by the use of a non-Infragistics style set to the WebDataMenu's CssClass property that contained the "font-weight:bold" style.

Solution 1: You create your own ".igdm_MenuItemHorizontalRootLink" which combines/overwrites the Infragistics class with the same style.

Issues 2: Tried to reduce the font using the WebDataMenu property font-size, as well as any of the other CssClass properties available at different levels, the font size (and also color) do not change.

Solution 2: You create your own ".igdm_MenuItemHorizontalRootLink" and ".igdm_MenuItemHorizontalRoot" which combines/overwrites the Infragistics classes with the same style. To change the sub menu items you need to overwrite/use the ".igdm_MenuItemVerticalLink" and ".igdm_MenuItemVertical" css classes.

Issues 3: Change the height of the menu "bar" and this did shrink to the appropriate size, but the text stayed in the same position it was in before and I could find no way to get it to shift so that it was no longer partially "cut off".  Also there is now a "gap" between the 3rd root menu item and its children.

Solution 3: You create your own ".igdm_MenuItemHorizontalRoot" and set the property of the Height of the WebDataMenu.  The Infragistics default is 26px.  So to make it work for 18px I set the height of the WebDataMenu to 18px and added padding of 2px to the top and 4px to the right in the css class ".igdm_MenuItemHorizontalRoot". Not this was also further exasperated by some "inline" ASP.NET <%%>.  used Page_Init and a Literal control to write the scripts to the header so as to not need the "inline" code.

The only trouble with using these Infragistics css classes is that if you have two menus on a page (Form Menu and "sub control" menu or Application Menu and Page Menu), the styles will be exactly the same for both.  So you will have to figure out a way to get them to be different.

Issue needs fixing: Despite the workaround to Issue 1, you should be able to use your own css classes without it causing issues with Infragistics UI so this still needs to be fixed.

What if I do need my menu to scroll? My horizontal menu is limited by certain width, and the items are added to it in server-side code at runtime. So when there're more items than menu can fit, I need it to scroll. And it works - it scrolls and all items appear correctly - in all browsers but FireFox. In FireFox last item is always missing.

Any idea how to make this work with scrolling enabled? thanks

Thanks, Prabha, that did the trick.

For others reading this thread, EnableScrolling is a WebDataMenu property, not some obscure CSS tag.

Charles

Hello Charles,

I heard back from development team that setting Enablescrolling property to false will resolve the issue of missing item. By default this property is true.

Setting EnableScrolling to true will result to fixed width of the <ul> element which holds all the root menu items. The problem comes when there is bold style applied to the menu container, because in the calculation of the <ul> element width is not taken.

Please let me know if you have any further questions regarding this matter.

As a follow-up to my previous post:

• Changing the overflow setting did not make a difference.
• What did make a difference: The CSS class has a bunch of fonts listed in font-family, presumably using the first one on the list that the browser supports. Removing Verdana with a font-size of 12px displayed the complete menu. Since Verdana is a wider font (by eyeball) than Arial or Sans-serif (both of which I tested), that would indicate to me that rendering occurs after the size of the menu has already been determined (and, to possibly anticipate a question, width of the menu is set to 100%).

Charles