A Nerd's False Positive.

ASP.NET Menu rendering issue in Google Chrome


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)

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.


Adding Controls to Visual Studio Toolbox

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’.

Choose Item

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

Name Control

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

Choose Item

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

Browse Control

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.