asp.net RadioButtonList order of html elements

Question

I've received from a design agency the following html to be displayed in a form on one of asp.net webapps:

<label>
    <input type="radio" />
    Label Text 1
</label>

<label>
    <input type="radio" />
    Label Text 2
</label>

<label>
    <input type="radio" />
    Label Text 3
</label>

You can imagine that the output produced will place the radio button on the left of the label text.

Since the number of labels/radio buttons is variable I decided to use the RadioButtonList to dynamically manipulate the number of controls added.

The problem with the RadioButtonList is that the html produced by it is not very flexible. The nearest that I got to the layout my customer wants is the following code. But this places the radio buttons on the right of the label. :(

    <asp:RadioButtonList ID="DayOfWeekRadioButtonList" runat="server" RepeatLayout="Flow" RepeatDirection="Vertical" TextAlign="Left">
    </asp:RadioButtonList>

And here is the generated HTML:

<label for="ControlID1">Text 1</label>
<input id="RadioControlID1" type="radio" name="NameRadioControlID1" value="Text 1" />

<label for="ControlID2">Text 2</label>
<input id="RadioControlID2" type="radio" name="NameRadioControlID2" value="Text 2" />

<label for="ControlID3">Text 3</label>
<input id="RadioControlID3" type="radio" name="NameRadioControlID3" value="Text 3" />

Is it possible to place the input control within the label?

Answer 1

Your TextAlign property is set to "Left", which means the text goes to the left of the buttons. I believe setting it to TextAlign = "Right" should do what you want.

Answer 2

You won't be able to get the RadioButtonList control to render the button inside the label as you describe without perhaps making a custom control to override the behavior.

As womp mentioned, you need to set TextAlign="Right" instead of "Left," or if you leave that attribute blank it should default to the expected behavior. Setting it to "Right" means "align the text to the right of the radio button." You have the opposite with "Left."

Instead of making a custom control you could use regular labels and RadioButton controls to get the desired output, but you would need to associate a GroupName and check each button individually. This can be enhanced by placing them in a Panel control then looping over them and determining which is selected.

It's more markup but it matches the format you mentioned:

<label>
  <asp:RadioButton ID="rbMonday" runat="server" GroupName="DaysOfWeek" />
  Monday
</label>

Frankly though, the markup shouldn't matter since it doesn't provide any extra functionality. Ultimately you want to capture the input, and whether the label contains the radio button or not doesn't affect that goal. If the agency you're dealing with is flexible about that you can explain the different options and perhaps they will accept the default formatting, which makes you more productive and allows you to spend less time on this (which, in turn, should make them happier).