display radiobuttonlist inline display radiobuttonlist inline asp.net asp.net

display radiobuttonlist inline


Check the solution suggested by Aroon Soraali:

<asp:RadioButtonList RepeatDirection="Horizontal" ID="rblFilterType" runat="server"/>


Try this:

.radioButtonList label{    display:inline;}

works for me, but if it doesn't work for you then you might try this solutionhttp://forums.asp.net/t/1089664.aspx/1

He displays the input and label as block and floats both.


If you add an ASP.NET checkboxlist or radiobuttonlist to a page with "RepeatLayout=Flow" it generates an unstyled "span" tag wrapping a series of "input" and "label" tags (for each "ListItem").

For Bootstrap 4, the simplest solution seems to be to add a custom class to the list and add some CSS for that class's "input" and "label" elements. Note that you only need "RepeatLayout=Flow" which strips away any of the ASP.NET-generated formatting.

For example the following RBL:

<asp:RadioButtonList runat="server" ID="rblContact" RepeatLayout="Flow"  CssClass="form-inline bootRBL">  <asp:ListItem Value="0" Text="Email" Selected="True"  />  <asp:ListItem Value="1" Text="Phone"  /></asp:RadioButtonList>

uses the custom class "bootRBL" and renders as a series of inline elements with correct spacing between the input and labels.

<style type="text/css">    .bootRBL input {display:inline;margin-right:0.25em;}    .bootRBL label {display:inline;margin-right:1em;}</style>
<span id="rblContact" class="form-inline bootRBL">			<input id="rblContact_0" type="radio" name="rblContact" value="0" checked="checked" />			<label for="rblContact_0">Email</label>			<input id="CrblContact_1" type="radio" name="rblContact" value="1" />			<label for="rblContact_1">Phone</label></span>