I am porting an ASP.NET 2.0 project to VS 2010 and ASP.NET 4.0. I have the asp.menu set up to go horizontally across the top of my master page. This works pretty good, but I have a couple of pages that take a long time to load a lot of data (that is another
issue though). The problem that I am having is that when these slow pages load the menu is initially vertical and then switches to horizontal. This looks so bad that I had initially thought that it was displaying my sitemap page. I just want it to draw
properly (horizontal) to begin with.
Also, the content page has a script manager with CDNenable set to true.
Try to set the orientation property programmatcially in page_load event, otherwise, you have to create a custom server control which inherits the standard menu control and overwrite the initial orientation behavior.
Setting the orientation programmatically accomplishes nothing. This seems to be happening always in IE 8 and FireFox. Chrome lets it slip by on rare occasions only.
Currently i don't much time to play around looking for a fix, so i'm just hidding the menu by default and showing it when the page has finished loading using jQuery. Not what i'd like, but it's simple and much better looking than the vertical menu.
I was getting the same problem. I did something similar by onload="display()" to the body, wrapping the menu in a div tag with display=none, and adding
<script type="text/javascript" language="javascript" id="menuVisible">
function display() {
var x = document.getElementById("<%=menuContainer.ClientID %>");
x.style.display = "";
}
</script>
I am having same issue and even MenuItemDataBound event is not working for me. It is still drawing vertacially and then after few moments it draws horizentally??
I didn't find any solution yet but I have found the reason why my menu items are behaving like that.
I have some links to external websites (Like google map, SSL VeriSign etc.) in my page which are causing this kind of behaviour. When I remove those external links from the page then my Menu works fine which is very weird.
By using RenderingMode="Table" Menu is rendering horizentally which is fix of this weird issu but now Menu has lost all it's visual settings. All menu items are being display as simple hyperlink. Is there any other property I need to change
to get those visuals back?
mbentley
Member
11 Points
13 Posts
Menu seems to display vertically, then go to horizontal
Jun 15, 2010 04:12 PM|LINK
I am porting an ASP.NET 2.0 project to VS 2010 and ASP.NET 4.0. I have the asp.menu set up to go horizontally across the top of my master page. This works pretty good, but I have a couple of pages that take a long time to load a lot of data (that is another issue though). The problem that I am having is that when these slow pages load the menu is initially vertical and then switches to horizontal. This looks so bad that I had initially thought that it was displaying my sitemap page. I just want it to draw properly (horizontal) to begin with.
Also, the content page has a script manager with CDNenable set to true.
Any ideas on how to stop this?
The menu is defined as:
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"><asp:Menu id="Menu3" runat="server" datasourceid="SiteMapDataSource1"</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> orientation="Horizontal" staticdisplaylevels="2" cssclass="MenuItem" </div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> height="22px" staticsubmenuindent="2px" width="100%" staticenabledefaultpopoutimage="False"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> <StaticMenuStyle cssclass="MenuItem"></StaticMenuStyle></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> <StaticSelectedStyle cssclass="MenuItem"></StaticSelectedStyle></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> <StaticMenuItemStyle cssclass="MenuItem"></StaticMenuItemStyle></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> <DynamicHoverStyle cssclass="MenuItem"></DynamicHoverStyle></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> <DynamicMenuStyle cssclass="MenuItemDynamic"></DynamicMenuStyle></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> <DynamicSelectedStyle cssclass="MenuItemDynamic"></DynamicSelectedStyle></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> <DynamicMenuItemStyle cssclass="MenuItem"></DynamicMenuItemStyle></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> <StaticHoverStyle cssclass="MenuItem"></StaticHoverStyle></asp:Menu></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /></div><asp:Menu id="Menu3" runat="server" datasourceid="SiteMapDataSource1"
orientation="Horizontal" staticdisplaylevels="2" cssclass="MenuItem"
height="22px" staticsubmenuindent="2px" width="100%" staticenabledefaultpopoutimage="False">
<StaticMenuStyle cssclass="MenuItem"></StaticMenuStyle>
<StaticSelectedStyle cssclass="MenuItem"></StaticSelectedStyle>
<StaticMenuItemStyle cssclass="MenuItem"></StaticMenuItemStyle>
<DynamicHoverStyle cssclass="MenuItem"></DynamicHoverStyle>
<DynamicMenuStyle cssclass="MenuItemDynamic"></DynamicMenuStyle>
<DynamicSelectedStyle cssclass="MenuItemDynamic"></DynamicSelectedStyle>
<DynamicMenuItemStyle cssclass="MenuItem"></DynamicMenuItemStyle>
<StaticHoverStyle cssclass="MenuItem"></StaticHoverStyle></asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
Menu Control
Nai-Dong Jin...
All-Star
41630 Points
3558 Posts
Re: Menu seems to display vertically, then go to horizontal
Jun 18, 2010 03:25 AM|LINK
Hi,
Try to set the orientation property programmatcially in page_load event, otherwise, you have to create a custom server control which inherits the standard menu control and overwrite the initial orientation behavior.
Thanks.
Kromholc
Member
23 Points
7 Posts
Re: Menu seems to display vertically, then go to horizontal
Jun 23, 2010 03:33 PM|LINK
Hi,
Setting the orientation programmatically accomplishes nothing. This seems to be happening always in IE 8 and FireFox. Chrome lets it slip by on rare occasions only.
Currently i don't much time to play around looking for a fix, so i'm just hidding the menu by default and showing it when the page has finished loading using jQuery. Not what i'd like, but it's simple and much better looking than the vertical menu.
Best regards,
Alan
ckachelm
Member
2 Points
3 Posts
Re: Menu seems to display vertically, then go to horizontal
Jul 09, 2010 06:35 PM|LINK
I was getting the same problem. I did something similar by onload="display()" to the body, wrapping the menu in a div tag with display=none, and adding
<script type="text/javascript" language="javascript" id="menuVisible">
function display() {
var x = document.getElementById("<%=menuContainer.ClientID %>");
x.style.display = "";
}
</script>
to the page.
mbentley
Member
11 Points
13 Posts
Re: Menu seems to display vertically, then go to horizontal
Jul 12, 2010 02:47 PM|LINK
So far, what seems to be working the best for me is to add a function to the MenuItemDataBound event to reset the menu.
protected void MenuMain_MenuItemDataBound(object sender, MenuEventArgs e)
{
MainMenu.Orientation = Orientation.Horizontal;
}
horizontal menu Menu & Browser Compatibility Issues
maqsood
Member
48 Points
19 Posts
Re: Menu seems to display vertically, then go to horizontal
Jan 10, 2011 01:25 AM|LINK
I am having same issue and even MenuItemDataBound event is not working for me. It is still drawing vertacially and then after few moments it draws horizentally??
Any other solution to this problem?
kengland
Member
2 Points
1 Post
Re: Menu seems to display vertically, then go to horizontal
Jan 11, 2011 11:31 PM|LINK
I'm having the same problem and I can't seem to fix it. Have you found any other ideas?
Thank you.
maqsood
Member
48 Points
19 Posts
Re: Menu seems to display vertically, then go to horizontal
Jan 12, 2011 12:20 AM|LINK
I didn't find any solution yet but I have found the reason why my menu items are behaving like that.
I have some links to external websites (Like google map, SSL VeriSign etc.) in my page which are causing this kind of behaviour. When I remove those external links from the page then my Menu works fine which is very weird.
Any solutions to that?
mbentley
Member
11 Points
13 Posts
Re: Menu seems to display vertically, then go to horizontal
Mar 30, 2011 04:18 PM|LINK
In the end, we ended up giving up on it and setting RenderingMode="Table". This is pretty similar to the ASP.NET 2.0 menu.
maqsood
Member
48 Points
19 Posts
Re: Menu seems to display vertically, then go to horizontal
Mar 30, 2011 09:10 PM|LINK
By using RenderingMode="Table" Menu is rendering horizentally which is fix of this weird issu but now Menu has lost all it's visual settings. All menu items are being display as simple hyperlink. Is there any other property I need to change to get those visuals back?