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

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 2

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 3

try a negative text-indent style -20px works for IE8