How do you stop RadioButtonList Label text from wrapping under the button

Question

I have a radio button list and some of the labels are quite long so they wrap and the second line appears underneath the radio button. Ideally I would like the text to wrap with the second line starting beneath the first character of the first line.

Any ideas on how? or would I have to make my own list based control for this?

Answer 1

This CSS actually does the trick:

<style type="text/css">
 table.radioWithProperWrap input
 {    
      float: left;
 }

 table.radioWithProperWrap label
 {    
      margin-left: 25px;
      display: block;
 }
</style>
<asp:RadioButtonList runat="server" CssClass="radioWithProperWrap" ....>

Answer 2

You can take a radio button and a seperate label and set the AssociatedControlID property of that label.

<table>
    <tr>
        <td>
            <asp:RadioButton runat="server" ID="rdo" />
        </td>
        <td>
            <asp:Label runat="server" ID="lbl" Text="Radio Text" AssociatedControlID="rdo" />
        </td>
    </tr>
</table>

Answer 3

I know it's a little late in the game, but this worked for me:

    table.NoWrapRadio td
    {
        white-space:nowrap;
    }

When I used the chosen answerer's approach, the wrapping issue was fixed, but it made the radio buttons rendered a vew pixels lower than the labels. I am using IE9 compatability mode.

Answer 4

If anyone is having trouble getting the selected answer to work: it only works if your RadioButtonList uses RepeatLayout="Table" and not RepeatLayout="Flow". Took me a minute to catch that.