How to style a CheckBoxList?

[clintonG]

Has anybody figured out how to style this doohickey? I want to move the
label's text properties up so the text lines up with the checkbox itself.

<%= Clinton Gallagher

 

[Teemu Keiski]

Hi,

you need to check how it renders itself at client (probably with a <span> if
memory serves). Then you could had styles(heets) targeting that.

 

[clintonG]

Hello Teemu,

If it was that easy I would have figured it out already but this control was
written by somebody evil.

The ListItems render as Label controls instead of text and as such they
properties are not accessible.
The ListItem is limited and only supports Enabled, Selected, Text and Value
properties. We can't use a SkinID or CSS directly on the label text but I
have found a hack that probably breaks XHTML validity...

// CheckBoxList ListItem Style Hack
<asp:ListItem Value="<span class='SkipDays'>Sunday</span>" />

Even this hack does not for some reason allow me to modify padding or
margins of the text and I don't know if it is going to affect getting the
values of the checked items yet.

In this case I need to collect one or more days of the week and if I use
this hack the collection returned may not be Sunday, Monday, Thursday but
<span class='SkipDays'>Sunday</span><span
class='SkipDays'>Monday</span><span class='SkipDays'>Thursday</span>

<%= Clinton Gallagher

 

[Christopher Reed]

Your best bet is to ignore setting the text for your checkboxes and use
label controls instead. Then, if you're using a table for formatting, you
can use valign in the table cells to align your labels with your checkboxes,
though it probably won't be perfect depending on the browser. Different
browsers render the actual checkbox (fontwise) differently.

Hope this helps!

 

[clintonG]

Thanks for your comments Christopher but that raises an exception "The
'Text' property of 'asp:ListItem' does not allow child objects."

Apparently the problem is not so much the label and label text that the
ListItem generates but the TD that contains the label text. Ordinarily we
can use paddings and margins to overflow the text container to raise or
lower text a bit here and there as that's all that is ordinarily needed but
not in this case it seems.

I also see the checkbox control is still rendering as a bug which renders a
background color around the checkbox. I've forgotten exactly how to respond
to this IE bug. Do you know what property to modify? Again, as I recall it
was the TD background color properties but I can't remember.

<%= Clinton Gallagher

 

[Christopher Reed]

I was thinking more of using individual CheckBox objects with the Text
property set to String.Empty and then using the Label objects independent of
the CheckBox objects. For example,

<table>
<tr>
<td>
<asp:Label id="lblCBText1" Text="Checkbox #1" runat="server" />
</td>
<td>
<asp:Checkbox id="chkOption1" Text="" Value="1" runat="server" />
</td>
</tr>
.....
</table>

Probably needing to create this from a database, you could use a Repeater
object to build this table for you.

As for the background, again, this goes back to how the browser renders the
checkbox itself. In many cases, several browsers will always use white
within the drawn box regardless of whatever settings you make. If you want
more control over this aspect of the checkbox, you can always create your
own.