Click here to Skip to main content
15,565,661 members
Articles / Web Development / XHTML
Posted 23 May 2009


46 bookmarked

Cross-Browser Panel Web Control

Rate me:
Please Sign up or sign in to vote.
4.61/5 (18 votes)
23 May 2009CPOL5 min read
The standard Panel control doesn't have good layout in most browsers. A new Panel Web Control is introduced with consistent look-and-feel for every browser.
Extend Panel


Controls introduced by Microsoft are simple ones and rarely used by live Web applications in the market. Panel is such a control. Because of its simplicity, the look-and-feel of the Panel control is not consistent in every browser.


Panel control plays a crucial role in most Web applications. Microsoft introduced Panel control which groups related widgets together. Especially, it draws a curved-corner panel with the title appearing on the top-left, like below. Interesting, isn't it?

Microsoft Panel Web Control

<asp:Panel ID="panel1" runat="server" GroupingText="Product Information"></asp:Panel>

Unfortunately, the look-and-feel is not the same in other browsers (FireFox, Safari, Opera and Chrome). The curve-corner panel turns into a rectangle. The top-right and left-bottom corners are broken. When I looked at some open source frameworks, I found that they did not have any solutions or workarounds for this.

Microsoft Panel Web Control

I searched for some workarounds on the Internet but the look-and-feel is still not as good as it is shown on the Internet Explorer browser. I tried to look for a better panel on the Internet, but no one met my demands perfectly. Then I decided to write my own Panel Web Control.

Using the Extend Panel Web Control

By adding a reference to a separate library project that contains the panel control, you can use it in your code easily.

With Panel Web Control (named as "PDTPanel") in mind, the code looks like:

<webcontrols:PDTPanel ID="pnlTest" runat="server" 
GroupingTitle="Product Information" GroupingIconUrl="icon_edit.gif" 
Shadow="true" Width="200px" AllowExpandCollapse="true" />  

Now you can see the consistent look-and-feel in various browsers: Internet Explorer, FireFox, Safari, Opera and Google Chrome.

Extend Panel Web Control

By adding up some customization, I come up with a stronger container control as below:

Extend Panel Web Control

It looks nice, doesn't it?

Extend Panel Web Control

Panel control supports "Expand/Collapse" capability. You can enable this feature by setting AllowExpandCollapse=true.

Now you can look at the following attributes that panel control currently supports:

WidthIf you set its value as “Auto”, control will automatically shrink to fit its content inside
ShadowDrop a shadow surrounding panel
GroupingTitleTitle of panel
GroupingIconUrlDisplay an icon next to GroupingTitle
AllowExpandCollapseAllow/disallow the expand/collapse feature (appears on the top-right corner)
ExpandIconUrlSpecify the URL of icon which will override the built-in Expand icon (embedded image)
CollapseIconUrlSpecify the URL of icon which will override the built-in Collapse icon (embedded image)
InitialStateSpecify the initial state (expand|collapse). By default, it is in "expand" state.
ExpandTooltipSpecify the tooltip of expand/collapse icon when user moves mouse over it. Default value is "Click to expand"
CollapseTooltipSpecify the tooltip of expand/collapse icon when user moves mouse over it. Default value is "Click to collapse"
BackgroundUrlFill the whole inner area with specified background
AdjustedWidthAn additional attribute to defeat Internet Explorer bug (except Internet Explorer 8.0). Because of Internet Explorer bug, panel control cannot shrink to fit the content inside perfectly.
To get around this problem, a fixed value for "AdjustedWidth" will override the current width of the panel control

Notes: Google Chrome doesn't accept Image URL without specifying the slash "/". It requires that Image URL must always begin with slash, otherwise image cannot display correctly. Meanwhile, other browsers (Internet Explorer, FireFox, Safari, Opera) accept Image URL without slash "/".



Inside the C# Web Control Code

I put all stuff in an assembly, including a Web Control and embedded images/CSS.

Extend Panel Web Control

The implementation for this control is very simple. First, place all the child/nested controls in an ArrayList variable (used by some private functionalites). Override functions AddParsedSubObject() and CreateChildControls().

protected override void AddParsedSubObject(Object obj)
protected override void CreateChildControls()
    System.Collections.IEnumerator myEnumerator = _items.GetEnumerator();
    while (myEnumerator.MoveNext())
        Control ctr = (Control)myEnumerator.Current;

Second, the look-and-feel of panel will be made through overriding function Render():

protected override void Render(HtmlTextWriter output)
...//Main code goes here

As a result, HTML table and cells are rendered as below:

Extend Panel Web Control

Embedded Resources

Because I put all the images/CSS files inside the same assembly with web control, these resources must be embedded. Please learn more about Web Resource on MSDN.

After all the resources have been embedded, the following code snippet will extract the URL of the resource:

string imageWebResourceUrl;
imageWebResourceUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), 
                      "TruongPham.WebControls.Images" + 
                     ((Shadow == true) ? ".WithShadow" : "") + 

Dynamic ClientID: ContentRegionID

This is a private property assigned to content region inside the panel control. This is being used for JavaScript code snippet to fire expand/collapse event. Note that ContentRegionID should NOT be a fixed value, otherwise a conflict occurs when using multiple panel controls in the same Web page. It’s better to associate this property with a GUID.

private string _controlGUID = System.Guid.NewGuid().ToString("P");
private string _contentRegionid = string.Empty;
private string ContentRegionID
    if (_contentRegionid == string.Empty) 
       _contentRegionid = "contentRegion_" + _controlGUID;
    return _contentRegionid;

Browser Compatibility

Browsers Compatability

This control works fine with Internet Explorer, FireFox, Safari, Opera and Google Chrome. Because I use image to render panel, the look-and-feel is pretty much the same for all browsers, except for some slight differences among browsers. The different browsers treat “width:100%” in different ways. As you look at the body of function Render(), you can see the following code snippet that defeats a bug which occurs only in Internet Explorer 8.0, Safari and Chrome.

//Safari, Google Chrome
if (Page.Request.Browser.Browser.ToLower() == "applemac-safari" ||
    (Page.Request.Browser.Browser.ToLower() == "ie" && 
     Page.Request.Browser.Version == "8.0") //IE 8.0
    sbOut.AppendLine("<td style='WIDTH:" + _maxWidth + 
                     "px; BACKGROUND: url(" + imageWebResourceUrl + 
    sbOut.AppendLine("<td style='BACKGROUND: url(" + 
                     imageWebResourceUrl + ")'></td>");


DOCTYPE is also a problem for browser compatibility. I came across this when I found that my Web page contained the DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 

My Web page worked fine in Internet Explorer (version 5.5, 6.0 and 7.0), but for browsers Internet Explorer 8.0, FireFox, Safari, Opera and Chrome, the look-and-feel has been broken due to issue of the above DOCTYPE.

Extend Panel

So in order to use this panel control correctly, you should avoid using the above DOCTYPE.

Known Issues

  1. Performance

    If we set width=”auto”, the control will search child controls to determine the maximum width. This could be time-consuming if there are lots of child/nested controls, leading to low performance for rendering the whole container. To avoid this, we will need to set the fixed width for container.
    Example: width=”300px”

  2. Icon Size

    If you set icon size too big, the layout might be broken. This container control is designed in such a way that icon size is supposed to be 16x16.


No size fits all. This container might not work fine in some unknown special cases, but could be definitely customized to fit your own needs. Please let me know if there are some other things that need to be added.

Any suggestion could be mailed to me:

Henry, Pham Dinh Truong (Mr.)
Address: GrapeCity Inc., 6 Yen The st, Hanoi, Vietnam

Happy coding!


  • Version 1.0 (15 May, 2009) - Initial release


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Chief Technology Officer
Vietnam Vietnam
I'm the founder and CEO of a young IT company I founded it for the contribution back to the community.

I love working with Web-based workflow automation systems, ERP systems for SME, Data Visualization and Augmented Intelligence.

I have been working in ASP.NET for more than 12 years. I've also been working on Java and Windows-based apps for more than 5 years. My core competencies include ASP.NET (+net core), MVC, Restful API, Advance JavaScript, JQuery, Bootstrap, SubSonic, Dapper, Entity Framework,, ElasticSearch Ajax... I'm particularly interested in building smart apps with great UI/UX and high earned value.

I love to write elegant code. I am a type of pragmatic personality.

Recently, I've been interested in developing SPA apps using Angular with NodeJS backend. I also love to write the progressive web apps which could be the next big thing for the mobile web.

Feel free to discuss with me at:

Comments and Discussions

GeneralMy vote of 5 Pin
Manoj Kumar Choubey3-Feb-12 20:45
professionalManoj Kumar Choubey3-Feb-12 20:45 
GeneralMy vote of 4 Pin
sav68.net15-Feb-11 4:24
sav68.net15-Feb-11 4:24 
GeneralI like it Pin
Yves29-Mar-10 16:14
Yves29-Mar-10 16:14 
GeneralRe: I like it Pin
Pham Dinh Truong31-Jan-13 19:08
professionalPham Dinh Truong31-Jan-13 19:08 
GeneralExcellent, But how to...? [modified] Pin
PeaceTiger29-Dec-09 14:20
PeaceTiger29-Dec-09 14:20 
GeneralExcellent presentation Pin
musacj29-May-09 6:18
musacj29-May-09 6:18 
GeneralRe: Excellent presentation Pin
Pham Dinh Truong10-Jun-09 0:43
professionalPham Dinh Truong10-Jun-09 0:43 
QuestionWhy not using Ajax ? Pin
delong28-May-09 11:37
delong28-May-09 11:37 
AnswerRe: Why not using Ajax ? Pin
Pham Dinh Truong10-Jun-09 0:41
professionalPham Dinh Truong10-Jun-09 0:41 
GeneralVery useful Pin
adatapost23-May-09 22:58
adatapost23-May-09 22:58 
Questionso cool... Pin
barbod_blue23-May-09 20:52
barbod_blue23-May-09 20:52 
AnswerRe: so cool... Pin
Pham Dinh Truong26-May-09 8:44
professionalPham Dinh Truong26-May-09 8:44 
AnswerRe: so cool... Pin
Pham Dinh Truong26-May-09 8:51
professionalPham Dinh Truong26-May-09 8:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.