ASP.NET: RadioButton, RadioButtonList, CheckBox and CheckBoxList

[Martin Robins]

Within bootmetro.css, there is a comment...

/*
   NOTE:
   Originally the following rules used the adjacent sibling selector '+ span'
   but in Rails & ASP.NET radio & checkbox are rendered with a supplemental hidden input following
   the radio/checkbox, so I changed the rules to use the general sibling selector '~ span' and adding a
   custom class to the span.
   Note that the general sibling selector '~' is CSS3 only and is not supported in <= IE7.
*/

I am trying to use a RadiobuttonList and a CheckBoxList in ASP.NET but cannot fathom the correct manner in which to apply styles.

For the RadioButtonList control, I am assigning "metro-radio" as the CssClass. All I end up with is the text for each option but no radio buttons.

For the CheckBoxList control, I am assigning "metro-checkbox" as the CssClass. I do get checkboxes, but these are the default checkboxes from the browser, not those as seen on the base-css.html example.

I assume from the comment in the css (as identified above) that this is something that you have thought about; could you please provide an example of the correct markup?

I am testing in IE10 and FF19.

[Martin Robins]

Just to be complete, here is an example of my use of the RadioButtonList control...

<div class="container">
  <div class="form-horizontal">
    <div class="control-group">
      <asp:Label runat="server" AssociatedControlID="Locations" CssClass="control-label" Text="Preferred location(s)" />
      <div class="controls">
        <asp:RadioButtonList ID="InvestmentTypeSelectionOptions" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" CssClass="metro-radio">
          <asp:ListItem Text="Any" Selected="True" />
          <asp:ListItem Text="Selected" />
        </asp:RadioButtonList>
        <br />
        <agp:InvestmentTypeCheckBoxList ID="InvestmentTypes" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" AppendDataBoundItems="true" CssClass="metro-checkbox">
        </agp:InvestmentTypeCheckBoxList>
       </div>
    </div>
 </div>
</div>

This results in the following markup...

<div class="container">
  <div class="form-horizontal">
    <div class="control-group">
      <label for="bodyContentPlaceHolder_InvestmentTypes" class="control-label">Investment type(s)</label>
      <div class="controls">
        <span id="bodyContentPlaceHolder_InvestmentTypeSelectionOptions" class="metro-radio">
          <input id="bodyContentPlaceHolder_InvestmentTypeSelectionOptions_0" type="radio" name="ctl00$bodyContentPlaceHolder$InvestmentTypeSelectionOptions" value="Any" checked="checked" />
          <label for="bodyContentPlaceHolder_InvestmentTypeSelectionOptions_0">Any</label>
          <input id="bodyContentPlaceHolder_InvestmentTypeSelectionOptions_1" type="radio" name="ctl00$bodyContentPlaceHolder$InvestmentTypeSelectionOptions" value="Selected" />
          <label for="bodyContentPlaceHolder_InvestmentTypeSelectionOptions_1">Selected</label>
        </span>
        <br />
        <span id="bodyContentPlaceHolder_InvestmentTypes" class="metro-checkbox">
          <input id="bodyContentPlaceHolder_InvestmentTypes_0" type="checkbox" name="ctl00$bodyContentPlaceHolder$InvestmentTypes$0" value="3" />
          <label for="bodyContentPlaceHolder_InvestmentTypes_0">Buy to rent</label>
          <input id="bodyContentPlaceHolder_InvestmentTypes_1" type="checkbox" name="ctl00$bodyContentPlaceHolder$InvestmentTypes$1" value="2" />
          <label for="bodyContentPlaceHolder_InvestmentTypes_1">Holiday home</label>
          <input id="bodyContentPlaceHolder_InvestmentTypes_2" type="checkbox" name="ctl00$bodyContentPlaceHolder$InvestmentTypes$2" value="4" />
          <label for="bodyContentPlaceHolder_InvestmentTypes_2">SIPP investment</label>
          <input id="bodyContentPlaceHolder_InvestmentTypes_3" type="checkbox" name="ctl00$bodyContentPlaceHolder$InvestmentTypes$3" value="1" />
          <label for="bodyContentPlaceHolder_InvestmentTypes_3">Undecided</label>
        </span>
     </div>
    </div>
 </div>
</div>

(I have reformatted the markup for clarity)

Thanks for any help you can offer.

[aozora]

Sadly RadiobuttonList and a CheckBoxList don't give you a goog control on the html generated.
I suggest you to use instead a Repeater control where in the within itemtemplate you can use a more correct html.
Pay attention that with the CheckBox and RadioButton controls, if you specify the Text property they generate also a label element.

[Martin Robins]

Apologies for the delay in responding to you.
Your suggestion worked perfectly thank you.

[aozora]

No problem, happy that works!