forms.RadioSelect stacks choices vertically instead of horizontally

[kenricci]

admin.py

class OTReqQuestionAdminForm(forms.ModelForm):
    class Meta:
        model = OTReqQuestion
        fields = '__all__'

    def __init__(self, *args, **kwargs):
        super(OTReqQuestionAdminForm, self).__init__(*args, **kwargs)
        self.fields['answer'].widget = forms.RadioSelect(choices=((1, 'Yes'), (0, 'No'), (3, 'N/A'),))

Grappelli 3.0.8 with Django 4.0.10 stacks choices vertically as shown here

Grappelli 2.13.3 with Django 2.2.10 stacks horizontally as shown here

[sehmaschine]

you are aware that you already opened a ticket? see #1021 ... fixed with stable/3.0.x

[kenricci]

This is different as it is using a forms widget with an inline

…

On Wed, Oct 18, 2023, 8:23 a.m. Patrick Kranzlmueller < ***@***.***> wrote: you are aware that you already opened a ticket? see #1021 <#1021> ... fixed with stable/3.0.x — Reply to this email directly, view it on GitHub <#1034 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAU6TYUI3OV2UFT3QHONKT3X77X6XAVCNFSM6AAAAAA6FWTPEWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONRYG4ZDONBSG4> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[kenricci]

working html

<div class="grp-td answer">
  <ul id="id_otreqquestion_set-0-answer">
    <li>
      <label for="id_otreqquestion_set-0-answer_0"
        ><input
          type="radio"
          name="otreqquestion_set-0-answer"
          value="1"
          id="id_otreqquestion_set-0-answer_0"
        />
        Yes</label
      >
    </li>
    <li>
      <label for="id_otreqquestion_set-0-answer_1"
        ><input
          type="radio"
          name="otreqquestion_set-0-answer"
          value="0"
          id="id_otreqquestion_set-0-answer_1"
        />
        No</label
      >
    </li>
    <li>
      <label for="id_otreqquestion_set-0-answer_2"
        ><input
          type="radio"
          name="otreqquestion_set-0-answer"
          value="3"
          id="id_otreqquestion_set-0-answer_2"
          checked=""
        />
        N/A</label
      >
    </li>
  </ul>
</div>

Broken html

<div class="grp-td answer">
  <div id="id_otreqquestion_set-0-answer">
    <div>
      <label for="id_otreqquestion_set-0-answer_0"
        ><input
          type="radio"
          name="otreqquestion_set-0-answer"
          value="1"
          id="id_otreqquestion_set-0-answer_0"
        />
        Yes</label
      >
    </div>
    <div>
      <label for="id_otreqquestion_set-0-answer_1"
        ><input
          type="radio"
          name="otreqquestion_set-0-answer"
          value="0"
          id="id_otreqquestion_set-0-answer_1"
        />
        No</label
      >
    </div>
    <div>
      <label for="id_otreqquestion_set-0-answer_2"
        ><input
          type="radio"
          name="otreqquestion_set-0-answer"
          value="3"
          id="id_otreqquestion_set-0-answer_2"
          checked=""
        />
        N/A</label
      >
    </div>
  </div>
</div>

[kenricci]

Appears to be in TabularInline forms

[parsch]

The new html that only uses div cannot be layouted differently by default because it does not have a specific attribute. If you define the CSS class "radiolist inline" for the widget, the list will also appear as such (but you will almost certainly have to define a width for the list as well).