Applying Bootstrap styles to RadioButtonList - css

Question

I have an ASP.NET WebForms application that has a RadioButtonList that I'd like to apply Bootstrap's CSS classes to.
Using the RepeatLayout="Flow" and RepeatDirection="Vertical" settings, a RadioButtonList will render like this:
<span id="PageContentPlaceHolder_RadioButtonList1">
<input id="PageContentPlaceHolder_RadioButtonList1_0" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" value="1" />
<label for="PageContentPlaceHolder_RadioButtonList1_0">One</label>
<br />
<input id="PageContentPlaceHolder_RadioButtonList1_1" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" value="2" />
<label for="PageContentPlaceHolder_RadioButtonList1_1">Two</label>
<br />
<input id="PageContentPlaceHolder_RadioButtonList1_2" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" value="3" />
<label for="PageContentPlaceHolder_RadioButtonList1_2">Three</label>
</span>
I'd like it to render like this (using Bootstrap's CSS classes):
<span id="PageContentPlaceHolder_RadioButtonList1">
<div class="form-check">
<input id="PageContentPlaceHolder_RadioButtonList1_0" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" class="form-check-input" value="1" />
<label for="PageContentPlaceHolder_RadioButtonList1_0" class="form-check-label">One</label>
</div>
<div class="form-check">
<input id="PageContentPlaceHolder_RadioButtonList1_1" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" class="form-check-input" value="2" />
<label for="PageContentPlaceHolder_RadioButtonList1_1" class="form-check-label">Two</label>
</div>
<div class="form-check">
<input id="PageContentPlaceHolder_RadioButtonList1_2" type="radio" name="ctl00$PageContentPlaceHolder$RadioButtonList1" class="form-check-input" value="3" />
<label for="PageContentPlaceHolder_RadioButtonList1_2" class="form-check-label">Three</label>
</div>
</span>
I realize that this may be easier to do if I use a Repeater and put the individual RadioButton and Label controls within the ItemTemplate, where I could apply the CssClass values. However, I also need to attach a RequiredFieldValidator to ensure that the user makes a selection. Basically it's a multiple-choice exam and I cannot pre-select any of the radio button items. I haven't had much luck getting a validator to work with it individual radio buttons. I suppose a CustomValidator might work if I can come up with the client-side and server-side validation code.
What's the best way to go get the result I'm looking for?

Answer 1

I like using radio buttons as sub page menus. They are really nice, and the code behind works really nice as a result.
So say i have this:
My style sheet is thus this:
body {
}
.radionav input {
width: 12px;
margin-top: 0px;
}
.radionav label {
display: inline-block;
border: 1px solid black;
border-radius: 25px;
height: 35px;
padding-top: 18px;
padding-right: 6px;
margin-left: -20px;
padding-left: 25px;
}
.radionav input[type="radio"]:checked + label {
display: inline-block;
border: 1px solid black;
border-radius: 25px;
height: 35px;
padding-top: 18px;
padding-right: 6px;
margin-left: -20px;
padding-left: 20px;
background: #253B82;
color: white;
border-spacing: 10px;
}
.radionav:after {
content: '';
display: inline-block;
width: 20px;
}
And the above markup for the radio becomes this:
<div style="float:left;padding-right:10px">
<asp:RadioButtonList ID="ShowProjects" runat="server" RepeatLayout="Flow"
AutoPostBack="True" RepeatDirection="Horizontal" >
<asp:ListItem Class="radionav" Selected="True">Live Projects</asp:ListItem>
<asp:ListItem Class="radionav" >All Projects</asp:ListItem>
<asp:ListItem Class="radionav" >My Proofs</asp:ListItem>
<asp:ListItem Class="radionav"> Create (start) a new Project </asp:ListItem>
</asp:RadioButtonList>
</div>
And now we get this:
You can of course tweak the css - perhaps make the buttons a bit longer, and say narrow. I had to really chop up the css, but now I just drop in a radiobutton list, style it and then I have a nice code behind event to work with.
So, My code say might be:
Select Case ShowProjects.SelectedIndex
Case 0
strWhere = "(Void = 0)" ' show live projects
Call LoadGrid(strWhere)
Case 1
strWhere = "" ' show all projects
Call LoadGrid(strWhere)
Case 2
' show proofs
Case 3
' create a project
End Select