How do I add space between items in an ASP.NET RadioButtonList

Question

I've got an ASP.NET RadioButtonList that displays four items using RepeatDirection="Horizontal" to display them on a single line. I'm using RepeatLayout="Flow" to avoid the markup for a table. However, this causes the items in the list to be placed right next to each other, which does not look good.

So, I tried the table layout to take advantage of the CellSpacing and/or CellPadding properties. Unfortunately, these properties affect both the vertical and horizontal spacing/padding within the table, so while I get the horizontal spacing, I also get undesired vertical spacing.

At this point, I'm down to this:

<asp:RadioButtonList ID="rblMyRadioButtonList" runat="server" 
    RepeatDirection="Horizontal"
    RepeatLayout="Flow" >
    <asp:ListItem Selected="false" Text="Item One&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_1" />
    <asp:ListItem Selected="false" Text="Item Two&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_2" />
    <asp:ListItem Selected="false" Text="Item Three&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_3" />
    <asp:ListItem Selected="false" Text="Item Four&nbsp;&nbsp;&nbsp;&nbsp;" Value="Item_4" />
</asp:RadioButtonList>

...which screams at me "You're not doing it right!"

What is the right way to accomplish this?

Airworthy

Answer 1

Use css to add a right margin to those particular elements. Generally I would build the control, then run it to see what the resulting html structure is like, then make the css alter just those elements.

Preferably you do this by setting the class. Add the CssClass="myrblclass" attribute to your list declaration.

You can also add attributes to the items programmatically, which will come out the other side.

rblMyRadioButtonList.Items[x].Attributes.CssStyle.Add("margin-right:5px;")

This may be better for you since you can add that attribute for all but the last one.

Levenson

Adding style="margin-right:30px" before the closing tag on the first three elements did the trick. Obvious once you've seen it. :-) – Airworthy

I think it should read: rblMyRadioButtonList.Items[x].Attributes.CssStyle.Add("margin-right", "5px") and I would explain he has to to this for each item in the list. – Gera

Answer 2

I know this is an old question but I did it like:

<asp:RadioButtonList runat="server" ID="myrbl" RepeatDirection="Horizontal" CssClass="rbl"> 

Use this as your class:

.rbl input[type="radio"]
{
   margin-left: 10px;
   margin-right: 1px;
}

Medick

Russell already provided this answer. Please stick to providing new solutions when answering. – Biggin

Hey Tyler, get down off of your elitist high horse. Ruben's answer is better/more effective, proven by the vote count ;) – Lampblack

Answer 3

Even easier...

ASP.NET

<asp:RadioButtonList runat="server" ID="MyRadioButtonList" RepeatDirection="Horizontal" CssClass="FormatRadioButtonList"> ...

CSS

.FormatRadioButtonList label
{
  margin-right: 15px;
}

Fissile

Answer 4

you can also use cellspacing and cellpadding properties if repeat layout is table.

    <asp:RadioButtonList ID="rblMyRadioButtonList" runat="server" CellPadding="3" CellSpacing="2">

Gittern

Answer 5

<asp:RadioButtonList ID="rbn" runat="server" RepeatLayout="Table" RepeatColumns="2"
                        Width="100%" >
                        <asp:ListItem Text="1"></asp:ListItem>
                        <asp:ListItem Text="2"></asp:ListItem>
                        <asp:ListItem Text="3"></asp:ListItem>
                        <asp:ListItem Text="4"></asp:ListItem>
                    </asp:RadioButtonList>

Hawes

Answer 6

Even though, the best approach for this situation is set custom CSS styles - an alternative could be:

• Use Width property and set the percentaje as you see more suitable for your purposes.

In my desired scenario, I need set (2) radiobuttons/items as follows:

o Item 1	o Item 2

Example:

<asp:RadioButtonList ID="rbtnLstOptionsGenerateCertif" runat="server" 
    BackColor="Transparent" BorderColor="Transparent" RepeatDirection="Horizontal" 
    EnableTheming="False" Width="40%">
    <asp:ListItem Text="Item 1" Value="0" />
    <asp:ListItem Text="Item 2" Value="1" />
</asp:RadioButtonList>

Rendered result:

<table id="ctl00_ContentPlaceHolder_rbtnLstOptionsGenerateCertif" class="chxbx2" border="0" style="background-color:Transparent;border-color:Transparent;width:40%;">
  <tbody>
    <tr>
      <td>
        <input id="ctl00_ContentPlaceHolder_rbtnLstOptionsGenerateCertif_0" type="radio" name="ctl00$ContentPlaceHolder$rbtnLstOptionsGenerateCertif" value="0" checked="checked">
        <label for="ctl00_ContentPlaceHolder_rbtnLstOptionsGenerateCertif_0">Item 1</label>
      </td>
      <td>
        <input id="ctl00_ContentPlaceHolder_rbtnLstOptionsGenerateCertif_1" type="radio" name="ctl00$ContentPlaceHolder$rbtnLstOptionsGenerateCertif" value="1">
        <label for="ctl00_ContentPlaceHolder_rbtnLstOptionsGenerateCertif_1">Item 2</label>
      </td>
    </tr>
  </tbody>
</table>

Antigen

This worked for me exactly how I needed it to. – Hexahydrate