I am trying to upgrade to 11.2, which means upgrading my main UltraWebMenu used for site navigation to a WebDataMenu. The menu is vertical, and oriented along the left hand side of the screen.
If scrolling is enabled, the flyout menus appear exactly 60 pixels to the right of the menu. Of course this makes them unusable, because as soon as you mouse off of the main menu, the submenu disappears as you are traversing the 60 pixel gap.
I whipped out my trusty IE developer tools, and here is what I discovered...
My menu has a defined width of 160px. This is set from the designer. If scrolling is enabled, there is a div that functions as a scroll container that has a width of 220px (via an inline style). The flyouts are appearing to the right of that 220px wide div, instead of the div that contains the actual menu elements. The div also has an inline style height of 495px, which is too high, but that is another story.
I checked the markup being returned from the server using Fiddler, and the server markup for that div does not define a width... meaning the width is being set in javascript somewhere.
Turning off scrolling fixes the issue, but I have another site I have to upgrade where scrolling is mandatory.
This is occurring in IE 8 using version 11.2.
Hello Rob Hudson ,
Thank you for posting in our forum.
Could you share the mark-up you’re using for the WebDataMenu.
I tried to reproduce your issue with version 1019 of 11.2 based on your explanation but it didn’t reproduce.
I’m attaching the sample for your reference. If possible modify it so that I reproduces your issue.
Thank you for your cooperation.
Best Regards,
Maya Kirova
Developer Support Engineer
Infragistics, Inc.
http://es.infragistics.com/support
The following code demonstrates the issue. Since this is a master page, I have to specify which menu I am styling. I do this by placing it with a div, and using the id of the div to isolate the menu.
In addition to the gap between the menu root and the submenu, there are other issues.
Both the scrollbox and the submenu frames are calculating dimensions before the style is applied. You will notice that the submenu frames are much too large for the content. Also, you can scroll way past the bottom of the menu (because the scrollbox is too tall).
I realize that the way I am modifying the trendy style is awkward... However, the fontsize attribute of the control has no effect, and I don't know a better way to do it. I am open to suggestions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <title></title> <style type="text/css"> #SiteMenu .igdm_TrendyMenuItemHorizontalRoot, #SiteMenu .igdm_TrendyMenuItemVerticalRoot, #SiteMenu .igdm_TrendyMenuItemVertical { padding-top: 2px; padding-left: 2px; padding-right: 0px; padding-bottom: 0px; } #SiteMenu .igdm_TrendyMenuItemHorizontalRootLink, #SiteMenu .igdm_TrendyMenuItemVerticalRootLink, #SiteMenu .igdm_TrendyMenuItemVerticalLink { font-size: 9px; white-space: nowrap; } #SiteMenu span {white-space: nowrap} #SiteMenu .igdm_TrendyMenuGroupVertical, #SiteMenu .igdm_TrendyMenuGroupHorizontal, #SiteMenu .igdm_TrendyMenuScrollContainerVertical { border: 1px solid #000000; } </style></head><body> <form id="form1" runat="server"> <ig:WebScriptManager ID="WebScriptManager1" runat="server"> </ig:WebScriptManager> <div id="SiteMenu"> <ig:WebDataMenu ID="IGMenu" runat="server" StyleSetName="Trendy" Font-Bold="True" ScrollingSpeed="Fast" EnableScrolling="True" Width="160" Height="250" BorderColor="Black" BorderStyle="solid" BorderWidth="1"> <AutoPostBackFlags ItemClick="Off" /> <GroupSettings AnimationType="OpacityAnimation" AnimationDuration="200" AnimationEquationType="EaseInOut" /> <Items> <ig:DataMenuItem Text="Menu Item Position 1"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 2"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 3"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 4"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 5"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 6"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 7"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 8"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 9"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 10"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 11"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 12"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 13"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 14"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 15"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 16"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 17"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 18"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 19"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> <ig:DataMenuItem Text="Menu Item Position 20"><Items><ig:DataMenuItem Text="Submenu Item Position 1"/><ig:DataMenuItem Text="Submenu Item Position 2"/><ig:DataMenuItem Text="Submenu Item Position 3"/><ig:DataMenuItem Text="Submenu Item Position 4"/><ig:DataMenuItem Text="Submenu Item Position 5"/></Items></ig:DataMenuItem> </Items> </ig:WebDataMenu> </div> </form></body></html>