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://ko.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>
Maya, thank you very much! You were very helpful!
Hello,
I've logged the issue with development issue number:101380 and have opened a case on your behalf (CAS-83273-FDX6YC) and linked it to it.
Now you can view the status of the development issue connected to this case by selecting the "Development Issues" tab when viewing this case on the web site.
Let me know if you need more information.
Thank you very much.
You are correct that it happens only when the text exceeds the width of the container... but that calculation is made using a much larger font size (that included with the StyleSet).
Unfortunately making the window large enough to accommodate the larger font size isn't an option for this site.
I will be following the issue closely, because i am stuck on version 11.1 until there is a resolution. I look forward to the development issue number so that I can track its progress.
Thanks again for your help, Maya,
-Rob
Hello Rob,
I’ve managed to reproduce your issue. I’ll log it as a development issue to be reviewed by our development team.
In the meantime you can try to make the width of the WebDataMenu to be large enough to contain the text in the parent elements. It seems that this only happens when the text exceeds the width of its container.
I’ll provide you the number of the development issue so that you can track its progress. Let me know if you have any further questions related to this in the meantime.
Thank you very much Alex, I will check this post regularly as I can't upgrade my main website until I have a way to accomplish scrolling.
Thanks,