CODEWITHSUNDEEP
djangodjango-formsdjango-templates
user2161650
user2161650

Reputation:

customize radio buttons in django

template code is

{{ form.incident_live }}

forms.py

INCIDENT_LIVE = (
    ('0', 'Live'),
    ('1', 'Test'),
)
class IncidentForm(forms.ModelForm):
     incident_live = forms.ChoiceField(widget=forms.RadioSelect(),choices=INCIDENT_LIVE)

The above code is giving me the radio buttons with choices in vertical order but i want it to be in horizontal i.e the equivalent html would be <input type="radio" name="status" />Live <input type="radio" name="status" checked="checked"/> Test.

Thanks in advance

Upvotes: 8

Views: 9636

Answers (6)

johnzilla
johnzilla

Reputation: 336

With inspiration from user12379095 I came up with this to get the radios to work with Bootstrap. This is for reference for people like me who are ignorant in HTML and CSS. This is using Boostrap 5, Django 3.1.6:

In forms.py:

from django import forms

class ExampleForm(forms.Form):
    choice = forms.ChoiceField(
        label = 'test',
        choices = zip([1,2,3], ['a','b','c']),
        widget = forms.RadioSelect(
            attrs = {'class' : 'form-check-input'}
        )
    )

In html template:

        {% for field in form.visible_fields %}
            {{ field.errors }}
            {% for radio in field %}
                <div class="form-check form-check-inline">
                    {{ radio }}
                </div>
            {% endfor %}
        {% endfor %}

Upvotes: 0

Stop War
Stop War

Reputation: 574

Actually the solution should be quite straight forward. It's all there in Django documentation.

Here is what I have done in some of the forms:

In the template, where the form fields are being laid out, I will do this:

{% for field in form.visible_fields %}
    {{ field.errors }}
    {% if field.name == "<some_field_name>" %}
    ...
    ...
    {% elif field.name == "<radio_field_name>" %}
        {% for radio in field %}
            <label for="{{ radio.id_for_label }}">
                {{ radio.choice_label }}
                <span class="radio">{{ radio.tag }}</span>
            </label>
        {% endfor %}
    {% endif %}

{% endfor %}

The resultant radio selects:

enter image description here

And this has worked thus far.

Upvotes: 3

Ankit Sharma
Ankit Sharma

Reputation: 1

<head>

    <style>

        #try li{
        display:inline-block; }

    </style>

<head>

<body>

    <form id="try" class="form-horizontal" role="form" action="" method="post" enctype="multipart/form-data">

         {% csrf_token %}
         {{ form.as_p}}                       
        <button type="submit" class="btn btn-
              success">Submit</button> 

    </form> 

 </body>

Upvotes: 0

Yup.
Yup.

Reputation: 1893

According to the Django docs 'attrs' is a dictionary containing HTML attributes to be set on the rendered widget.

With that in mind a simple form based solution would be something like the following:

class IncidentForm(forms.ModelForm):
    incident_live = forms.ChoiceField(
        widget=forms.RadioSelect(attrs={
            'display': 'inline-block',
        }),
        choices=INCIDENT_LIVE
    )

Upvotes: 0

Amit be
Amit be

Reputation: 469

This solution of "alecxe" didn't actually worked for me. But Adding CSS code did work:

{% block style %}
<style>
    .radio{
    display:inline-block;
    }
</style>
{% endblock %}

Upvotes: 2

alecxe
alecxe

Reputation: 473863

Sounds like a job for a custom widget renderer:

from django.utils.safestring import mark_safe

class HorizRadioRenderer(forms.RadioSelect.renderer):
    """ this overrides widget method to put radio buttons horizontally
        instead of vertically.
    """
    def render(self):
            """Outputs radios"""
            return mark_safe(u'\n'.join([u'%s\n' % w for w in self]))

class IncidentForm(forms.ModelForm):
     incident_live = forms.ChoiceField(widget=forms.RadioSelect(renderer=HorizRadioRenderer),choices=INCIDENT_LIVE)

taken from https://wikis.utexas.edu/display/~bm6432/Django-Modifying+RadioSelect+Widget+to+have+horizontal+buttons

Upvotes: 7

Related Questions