What You Need to Know About Web Controls : Page 2

Knowing the flaws in Web server controls and how to work around them before you use them can save you hours of time.

by Deborah Kurata

Apr 20, 2005

Page 2 of 3

Setting Styles in a CheckboxList
The CheckboxList is a Web server control that creates a multi-selection checkbox group as shown with the Choose Sections control shown in Figure 1. Each checkbox within the group is defined with a ListItem element within the CheckboxList element. The problem with this control is that the style of the ListItems does not work as expected.

Actually, several of the Web controls do not apply styles as you would expect. You can use the techniques presented in this section for those controls as well.

Start by placing a CheckboxList on a Web form, such as the "Choose Sections" CheckboxList shown in Figure 1. To match this example, define the CheckboxList with an ID of chkAccessSection.

There are several ways to define the ListItems within the CheckboxList control including data binding, code-behind, and HTML elements. For this example, define a CheckboxList control with its associated ListItems within the HTML as follows:

   <asp:checkboxlist id="chkAccessSection"
     runat="server" Width="200" CssClass="formitem"
     BorderStyle="Groove" BorderWidth="1">
      <asp:ListItem Value="Maintenance Tasks" />
      <asp:ListItem Value="Financial Tasks" />
      <asp:ListItem Value="Corporate Tasks" />
   </asp:checkboxlist>

Notice that this CheckboxList element includes a CssClass attribute. This attribute specifies the style class for the CheckboxList. However, this style class is sometimes ignored for the Listitems.

To see this behavior, associate the Web form containing the CheckboxList control with a style sheet by adding the following to the <head> section of the HTML:

   <LINK href="Styles.css" type="TEXT/CSS"
      rel="stylesheet">

In the Styles.css file, define a style for an HTML Label element:





   label
   {
      font-family:   Arial, Helvetica, sans-serif;
      font-size:     12px;
      font-weight:   normal;
      color:         Red;
   }

Add a style for an HTML Table Data (td) element:

   TD
   {
      font-family:   Arial, Helvetica, sans-serif;
      font-size:     16px;
      font-weight:   normal;
      color:         Olive;
   }

Finally, define a style class named formitem as follows:

   .formitem
   {
      font-family:   Arial, Helvetica, sans-serif;
      font-size:     14px;
      font-weight:   normal;
      color:         Navy;
   }

Each of these styles has a different font size and color so you can easily see which one is applied.

Actually, several of the Web controls do not apply styles as you would expect.

When you view your resulting Web form, either within Visual Studio or at runtime, you see that the style defined with the CssClass attribute of the CheckboxList is ignored. Instead, the standard HTML Label element style is applied. If you remove (or comment out) the Label element style definition in the style sheet, the TD element style is used. If you comment out the TD element as well, the CssClass style is then used.

This may seem odd until you see that, at runtime, ASP.NET generates the CheckboxList Web Server control items as Label elements within a Table Data (td) element. So if you have a style defined for a Label element in your style sheet, that style is used for your list items. If you don't have a Label element style defined, but do have a td element style defined, that style is used for your list items. Otherwise, the CssClass style is used.

The most obvious way to ensure your CssClass style is used would be to set the CssClass for the ListItem element in the HTML. However, there is no CssClass property of the ListItem element. Instead, set the style within the Value property of the ListItem element as follows:

   <asp:ListItem Value="<span
      class='formitem'>Maintenance Tasks</span>" />
   <asp:ListItem Value="<span 
      class='formitem'>Financial Tasks</span>" />
   <asp:ListItem Value="<span 
      class='formitem'>Corporate Tasks</span>" />

This will ensure that the desired style class is used, regardless of other style sheet entries. Especially if you make extensive use of style sheets, using this technique can save you hours of time trying to figure out why your styles don't always work.

« Previous Page 123 Next Page »

0 Comments (click to add your comment)

Comment and Contribute