display radiobuttonlist inline

Question

I've got a few radiolists on my page. The problem that I am facing is that the text of the radio buttons are not displayed inline of the radion button. I have put the repeatLayout to Table and Flow and neither is working. I have tried to add a style of display:inline; but that doesn't work either (though it did on the checkboxes and I thought that maybe it would work here too).

This is just a normal radiolist:

<asp:RadioButtonList ID="radRace" CssClass="radioButtonList" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem>Race 1</asp:ListItem>
    <asp:ListItem>Race 2</asp:ListItem>
    <asp:ListItem>Race 3</asp:ListItem>
    <asp:ListItem>Race 4</asp:ListItem>
</asp:RadioButtonList>

ul.radioButtonList { list-style:none; margin: 0; padding: 0;}
ul.radioButtonList.horizontal li { display: inline;}

When the repeatLayout is on table:

And when the repeatLayout is on Flow:

Can Somebody please help me on how to set it so the text is displayed next to the radio button... If it makes a difference the radioButtonList is in a table....

---

SOLUTION:

This is what the radio buttonlist look like now:

<asp:RadioButtonList ID="radRace" CssClass="radioButtonList" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem>Race 1</asp:ListItem>
    <asp:ListItem>Race 2</asp:ListItem>
    <asp:ListItem>Race 3</asp:ListItem>
    <asp:ListItem>Race 4</asp:ListItem>
</asp:RadioButtonList>

And this is the cssClass:

<style type="text/css">
    .radioButtonList { list-style:none; margin: 0; padding: 0;}
    .radioButtonList.horizontal li { display: inline;}

    .radioButtonList label{
        display:inline;
    }
</style>

Forgat

What does the following style mean and how did you assume and write: ul.radioButtonList.horizontal li { display: inline;} – Pouliot

I came onto a page where it explained a the radioButtonList, that it is an unordered list. It was worth a try to do it... I had display:inline; as style="splay:inline;" in the radioButtonList, but that didn't work either. display: inline means that the element is displayed inline, inside the current block on the same line. I found the ul.radioButtonList.horizontal on this page: code.google.com/p/aspnetcontroladapters/wiki/RadioButtonList and the explanation of inline and block here: quirksmode.org/css/css2/display.html – Forgat

You need to use the interpreted tag names for the class and not the asp tag names cuz ASP gets interpreted to HTML..!!! So, make it label..!!! – Pouliot

I am struggling with the same thing. I've tried setting CliendIDMode to Static, in hopes that would make it possible for me to set the display style via a class and applying that class with CssClass, but that didn't work. My RadioButtonList still displays like the original posted wrote. – Guanaco

@Rod, I have added my solution in my post, please have a look, I hope it helps.... – Forgat

Answer 1

Try this:

.radioButtonList label{
    display:inline;
}

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

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

Magi

Answer 2

Check the solution suggested by Aroon Soraali:

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

Ashton

Answer 3

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>

Dirtcheap

The addition of the margins makes this the optimal answer IMHO +1 – Billetdoux