Hi all, when I am using RadioSelectHorizontal widget, I wanna let the label text just below the circle to be chosen. And now the widget only allows all labels and choices in the same line. Any idea？Thanks!

Let’s say, in your __init__.py, you have

    radio_test = models.IntegerField(
        choices=[-1, -0.5, 0, 0.5, 1],
        label='Please indicate a value.',
        widget=widgets.RadioSelectHorizontal,
    )

Then, in your HTML template, you can include a table to put the radio buttons’ labels below the radio buttons:

    <p>{{ form.radio_test.label }}</p>
    <p>
      <table>
        <tr>
          <td>Not at all&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          {% for radio in form.radio_test %}
            <td style="text-align: center;">{{ radio }}</td>
          {% endfor %}
          <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Very much</td>
        </tr>
        <tr>
          <td></td>
          {% for label in form.radio_test.choices %}
            <td style="text-align: center; width: 2.5em; color: gray;">{{ label }}</td>
          {% endfor %}
          <td></td>
        </tr>
      </table>
    </p>
    <p>{{ formfield_errors 'radio_test' }}</p>

Taken from https://www.otreehub.com/forum/221/.

Alternatively, you can play around with the properties of the Bootstrap CSS classes that oTree assigns to the labels of radio buttons by including something like the following in your HTML template:

<style>
  .form-check-inline {
    margin-top: 2.5em;
    margin-right: 0.4em;
  }
  .form-check-label {
    width: 0px;
    transform: rotate(-60deg);
    margin-left: -2.05em;
    padding-left: 2.1em;
  }
</style>

See https://www.otreehub.com/forum/622/.

Just be aware that this will influence the formatting of the labels of *all* radio buttons on the respective page.

@BonnEconLab Thanks a lot for your help!