Now, that was weird!

Surprisingly, I jumped into a rendering issue with ASP.NET menu in Google Chrome and I observed following glitches:

1. Sub-menu items were not displaying on hovering over the main menu (say Products)
2. When I select the main menu item (Product), the respective sub-menu items are displayed horizontally, instead of listing vertically (on hover)

Here goes a sample screenshot

The solution is to check for Chrome user-agent string and clear the browser adapter mapping so that the control will be rendered irrespective of the client browser.

if (Request.UserAgent.IndexOf("Chrome") > 0)

{

    if (Request.Browser.Adapters.Count > 0)

    {

        Request.Browser.Adapters.Clear();

        Response.Redirect(Page.Request.Url.AbsoluteUri);

    }

}

The ControlAdapter provides a mapping between an ASP.NET Web Control and the adapter used to render the control in client browser.

If you are interested to dig deeper, then have a look at here and here.

Best way to use this code is to create a Base class inherited from System.Web.UI.Page and include this code in appropriate page event. Now, you can inherit this base class is those pages that require this piece of code.

Note: After clearing the Adapter for Chrome, I haven’t experienced any issues with other web controls so far. In case, if you are facing any issue, please feel free to share it.

Thanks

Most probably, you’ll come across situation where you need to use a third-party control in your project. Ever thought about how to add them in your Visual Studio toolbox. Just simple.

Step 1: Right-Click on your toolbox & select ‘Add  Tab’.

Step 2: Give a name to the tab, relating to the control you are trying to add; say ‘My Control 1’

Step 3: Right-Click on ‘My Control 1’ and select ‘Choose Items…’

Step 4: From the dialogue-box, click ‘Browse’ button.

Step 5: Browse your control and hit OK. Your control is added.

Now, for using the control you only have to drag-drop the control to your web-page.

Hope this helped.

Thanks