Make asp.net radobuttonlist as bootstrap button group
I have a settings page that allows certain alerts to be turned on and off. These switching on and off are monitored RadioButtonList
. I'm out of luck that I'm trying to use bootstrap classes or custom classes to get the effect I want.
Essentially I have this:
But I would like it to resemble something like this:
If any of you had a style of styling asp.net RadioButtonList
this way, I would appreciate your help!
EDIT
I tried to force the classes of the list items themselves
<div class="btn-group">
<asp:RadioButtonList ID="Rbl_MinBal" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="On" Value="0" class="btn btn-default" />
<asp:ListItem Text="Off" Value="1" class="btn btn-default" />
</asp:RadioButtonList>
</div>
Not ideal:
+3
source to share
2 answers
I was able to display it correctly by setting the css and data switcher to the correct location.
<asp:RadioButtonList ID="test" runat="server" RepeatLayout="flow" RepeatDirection="Horizontal" CssClass="btn-group" data-toggle="buttons">
<asp:ListItem class="btn btn-default">Item 1</asp:ListItem>
<asp:ListItem class="btn btn-default">Item 2</asp:ListItem>
<asp:ListItem class="btn btn-default">Item 3</asp:ListItem>
<asp:ListItem class="btn btn-default">Item 4</asp:ListItem>
</asp:RadioButtonList>
+3
source to share
use below code to get the same result
<div id="radio-group" class="btn-group" data-toggle="buttons">
<asp:RadioButton GroupName="myGroup" ID="RadioButton1" runat="server" Checked="True" CssClass="btn btn-default" Text="On" />
<asp:RadioButton GroupName="myGroup" ID="RadioButton2" runat="server" CssClass="btn btn-default" Text="Off" />
</div>
CSS
#radio-group label {
margin: 0;
}
JQuery
$("#radio-group :radio").each(function () {
if ($(this).is(':checked')) {
$(this).parent().addClass("active");
}
});
+2
source to share