CameTooFar A Nerd's False Positive

ASP.NET Menu rendering issue in Google Chrome

27. March 2012 21:09 by abhilashca in ASP.NET, Controls

 

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

menu_issue

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

Adding Controls to Visual Studio Toolbox

3. August 2011 18:32 by abhilashca in ASP.NET, Visual Studio, Controls


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.

Thanks