Asp.NET menu overexpanding in Chrome when PopOutImageUrl is defined

Question

I have a horizontal asp.NET menu with a vertical submenu that has another vertical submenu. Problem is that in Chrome (works fine in FF and IE), when PopOutImageUrl is defined, when I hover over the 1st vertical submenu, it expands to half the screen. I clear out the PopOutImageUrl, and it's the right size, but I don't notice the 2nd submenu. So how can I keep my arrow image without covering my screen in menu?

<asp:MenuItem NavigateUrl="TestPage.aspx" Text="HorizontalMenuItem" PopOutImageUrl="" SeparatorImageUrl="SeperatorImage.png">
    <asp:MenuItem NavigateUrl="TestPage2.aspx" Text="Test1" PopOutImageUrl="arrow.png" SeparatorImageUrl="" >
        <asp:MenuItem NavigateUrl="TestPage3.aspx" Text="SubTest1" PopOutImageUrl="">
        </asp:MenuItem>
    </asp:MenuItem>
</asp:MenuItem>

Answer 1

Hi!

I've just been working on a similar problem where my menu shows the word Expand next to each Static item and wouldn't even display the Dynamic items for my submenus... Really sucks. Happily though, I found a solution.

ASP.NET renders controls for backward compatibility with older browsers. This means that sometimes no matter what we do in our code, nothing will fix it. Basically, what's probably happening here is that ASP.NET is mistaking Chrome for other browser that doesn't have great support for the Menu control and is rendering it wrong.

What I did to fix it comes in 2 parts. I'm not sure if you need to apply them all or not for the fix to work, but my menu now displays exactly as I want it (except for a few tweaks I need to make with the CSS).

Hope this helps:

STEP 1: Add this to the code file for your Master Page

[VB]  
Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs)
    If Request.ServerVariables("HTTP_USER_AGENT").IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) <> -1 Then
        Page.ClientTarget = "uplevel"
    End If
    If Request.UserAgent.Contains("AppleWebKit") Then
        Request.Browser.Adapters.Clear()
    End If
End Sub

STEP 2: Creating a new browsers file
1. Create a new App_Browsers folder in your website
2. Add a new Browsers file to the folder and call it Chrome.browsers
3. Comment out all the default stuff and add the following:

<browsers>
    <browser refID="safari1plus">
        <controlAdapters>
            <adapter controlType="System.Web.UI.WebControls.Menu" adapterType="" />
        </controlAdapters>
    </browser>
</browsers>

Answer 2

Step 1, on its own didn't work, and step 2 errored with "The browser or gateway element with ID 'safari1plus' cannot be found"

Answer 3

Masterpage ends up with an error because it doesn't have and event named PreInit. So add the browser file and add the below code to the Page_Load event of your masterpage:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Request.UserAgent.IndexOf("AppleWebKit") > 0 Then
            Request.Browser.Adapters.Clear()
        End If
        Dim j As String = Page.Request.ServerVariables("http_user_agent").ToLower()
        If j.Contains("safari") Or j.Contains("chrome") Then
            Page.ClientTarget = "uplevel"
        End If
        If Request.ServerVariables("HTTP_USER_AGENT").IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) <> -1 Then
            Page.ClientTarget = "uplevel"
        End If
End Sub