Incorrect rendering of form with radio buttons

[parander]

I tried to create a simple form with 2 radio buttons and the buttons are rendered side by side horizontally. Would have expected that the radio buttons would be vertically stacked by default (as this is the bootstrap 4 default according to docs, see url below).

view/form:

from django.views.generic import FormView

class TestForm(forms.Form):
    OPTIONS = (('1', 'Yes'), ('0', 'No'))
    
    options = forms.ChoiceField(
        label="Simple form",
        choices=OPTIONS,
        widget=forms.RadioSelect)

class Index(FormView):
    template_name = 'index.html'
    form_class = TestForm

template index.html:

{% load bootstrap4 %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}

{# Display a form #}
<form action="/url/to/submit/" method="post" class="form">
  {% csrf_token %}
  {% bootstrap_form form %}
  {% buttons %}
    <button type="submit" class="btn btn-primary">
      Submit
    </button>
  {% endbuttons %}
</form>

result:

Simple form
( ) Yes  ( ) No
[Submit]

expected result:

Simple form
( ) Yes 
( ) No
[Submit]

The form part of the generated HTML looks something like this:

<form action="/url/to/submit/" method="post" class="form">
  <div class="form-group">
    <label for="id_options_0">Simple form</label>
    <div class="radio radio-success" id="id_options">
      <label for="id_options_0">
        <input type="radio" name="options" value="1" class="" title="" required="" id="id_options_0"> Yes
      </label>
      <label for="id_options_1">
        <input type="radio" name="options" value="0" class="" title="" required="" id="id_options_1"> No
      </label>
    </div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">
      Submit
    </button>
  </div>
</form>

Looking at the bootstrap 4 documentation it looks like each radio button should be placed inside a div with the class form-check to get the default stacked layout.

Furthermore i cannot find any references to the classes radio and radio-success in bootstrap 4, these 2 are added in post_widget_render for RadioSelect.

After browsing through the django-bootstrap4 code quickly i found def radio_list_to_class(self, html, klass) which maps <li> and </li> to empty string. If the radio buttons really are supposed to be inside a div with class form-check then we should probably change the mapping to look like this

mapping = [
            ("<ul", '<div class="{klass}"'.format(klass=classes)),
            ("</ul>", "</div>"),
            ("<li>", '<div class="form-check">'),
            ("</li>", "</div>"),
        ]

Trying this locally at least I get the default stacked layout that I expected, but I'm not sure if this will break some other layout. Or am I missing some other parameter here which can solve the initial problem?

[vsalvino]

I also noticed this same problem with the radios rendering horizontally instead of vertically by default. The rendering works as expected in 0.0.6 but changed to horizontal in 0.0.7.

Looking at the rendered markup, the .radio class is being applied to a div containing all of the labels/inputs, which is "incorrect" Bootstrap markup according to their docs.

[ErrorInPersona]

Yip, noticed just that and was driving me nuts. Please fix!

[parander]

I forked the repo and fixed this long time ago. However since nobody replied to this issue, until recently, I just assumed that nobody else cared or that the current behavior was intentionally. I've done a pull request #145 for this together with a fix for the submit button styling (should have btn-primary). We'll let the maintainers decide if the fix should be included or not.

Meanwhile if you want to try it out you can get the fork from
https://github.com/parander/django-bootstrap4/tree/radio-button-layout-fix

This branch is up to date with the latest master & also has the 2 fixes mentioned above.

[ErrorInPersona]

I forked the repo and fixed this long time ago. However since nobody replied to this issue, until recently, I just assumed that nobody else cared or that the current behavior was intentionally. I've done a pull request #145 for this together with a fix for the submit button styling (should have btn-primary). We'll let the maintainers decide if the fix should be included or not.

Meanwhile if you want to try it out you can get the fork from
https://github.com/parander/django-bootstrap4/tree/radio-button-layout-fix

This branch is up to date with the latest master & also has the 2 fixes mentioned above.

Thank you very much Sir. Much appreciated.

[dyve]

Thanks @parander! We @zostera are a bit stuck in BS3 because of long running projects using Bs3. Please feel free to submit PR's for anything that can be improved. If you would be interested in help maintaining the BS4 package, contact us.

[dyve]

Does aabd551 fix this for you?

[dyve]

Closing this issue because the original poster does not seem to respond.