GUI 101 - Group Boxes

Often, it's the little things that matter. In any application, small changes to the user interface can have a major impact on the readability and usability of a form. Fonts, element spacing, order of elements, colors, etc., all come into play. A skillful designer can make a few tweaks to a crappy interface and make it a delight to use. It's easy to be seduced by the siren songs of AJAX, Silverlight, gradient backgrounds, etc., but simply grouping controls logically can be much more effective in providing a good user experience and…it won't make your web application run like a sick dog.

If you have moved from regular Windows programming to Web programming, you might be missing one of the simplest, yet most powerful, constructs in the graphical interface: Group Boxes. The majority of Windows Form applications use Group Boxes yet you almost never see them on a web page. In HTML, they are called FieldSets. There is not a corresponding Server Control and FieldSets are not on the HTML tab of the Visual Studio tool box. Perhaps that is why we don't often see them.

Here is a FieldSet using CSS to control the appearance:

.GroupBox
{
    border: 1px solid #0000FF;
    display: inline;
    padding: 8px;
}

.GroupBoxLegend
{
    padding-bottom: 4px;
}

<fieldset class="GroupBox">
    <legend class="GroupBoxLegend">Shipping</legend>
    <asp:RadioButtonList ID="RadioButtonListShipping" runat="server">
        <asp:ListItem Text="US Mail"></asp:ListItem>
        <asp:ListItem Text="Fed Ex"></asp:ListItem>
        <asp:ListItem Text="UPS"></asp:ListItem>
        <asp:ListItem Text="Pony Express"></asp:ListItem>
    </asp:RadioButtonList>
</fieldset>

Here is the result:

It looks fine, but you don't have to use FieldSets.

It's a carefully hidden fact but the Panel Control can be used to create FieldSets. Normally, when you use a Panel Control, a simple div is rendered. But, when you add GroupingText to the Panel Control, a FieldSet is rendered inside the div. In addition, attributes are magically added to the borders of the FieldSet to give it the appearance of a typical windows group box. Style is not listed as an attribute of a Panel control, but you can add it to control the panel's position.

<asp:Panel ID="PanelSize" runat="server" GroupingText="Size"
    style="width:116px; : 341px; : 10px; position: absolute; height: 128px;" >
    <asp:RadioButtonList ID="RadioButtonSize" runat="server">
        <asp:ListItem Text="Small"></asp:ListItem>
        <asp:ListItem Text="Medium"></asp:ListItem>
        <asp:ListItem Text="Large"></asp:ListItem>
        <asp:ListItem Text="Ex Large"></asp:ListItem>
    </asp:RadioButtonList>
</asp:Panel>

Here is the result (note the styled border):

If you are interested, as I certainly was, in comparing the rendered HTML of a panel with and without grouping text, you can quickly dummy up a function like this:

protected void Button1_Click(object sender, EventArgs e)
{
    if (PanelSize.GroupingText == "")
        PanelSize.GroupingText = "Size";
    else
        PanelSize.GroupingText = "";
}

As usual, once you start tweaking GUIs, you can spend hours of precious time getting it right. With CSS you have much more control over the appearance of details than you do with Windows Forms group boxes. You can change just about everything which may, or may not, be a good thing depending on your schedule.

I hope you found this useful.

Steve Wellens

PS: Thanks to the anonymous poster Ben, who gracefully pointed out a critical error in my original post and made this post much more interesting.