CODEWITHSUNDEEP
htmlcssdjangoweb
user9041996
user9041996

Reputation: 37

How can I apply this style in Django? (radio type)

How can I apply this style in Django? just one class i can apply in django but double class i cant do that.

Django 2.1, python 3.7

I want use this css style https://bootsnipp.com/snippets/Zk2Pz

<div class="funkyradio">
        <div class="funkyradio-default">
            <input type="radio" name="radio" id="radio1" />
            <label for="radio1">First Option default</label>
        </div>
        <div class="funkyradio-primary">
            <input type="radio" name="radio" id="radio2" checked/>
            <label for="radio2">Second Option primary</label>
        </div>
        <div class="funkyradio-success">
            <input type="radio" name="radio" id="radio3" />
            <label for="radio3">Third Option success</label>
        </div>
        <div class="funkyradio-danger">
            <input type="radio" name="radio" id="radio4" />
            <label for="radio4">Fourth Option danger</label>
        </div>
        <div class="funkyradio-warning">
            <input type="radio" name="radio" id="radio5" />
            <label for="radio5">Fifth Option warning</label>
        </div>
        <div class="funkyradio-info">
            <input type="radio" name="radio" id="radio6" />
            <label for="radio6">Sixth Option info</label>
        </div>
    </div>

I want apply this part, and my django form class is 

class DataUploadForm(forms.ModelForm):
    class Meta:
        model = DataUpload
        fields =('Type', 'Kind', 'description', 'document',)
        widgets = {
            'Type': forms.RadioSelect(attrs = {'class' : 'funkyradio funkyradio-default'}),
            'Kind': forms.RadioSelect(),
        }

but it isn't work

I want radio form using that css

Upvotes: 0

Views: 481

Answers (1)

Saransh Singh
Saransh Singh

Reputation: 750

Based on what you are looking for, One solution is to get more granular when rendering your form in the template.

Django docs provide directions.

Below is one way you can do achieve your desired result based on the documentation:

In your forms.py, you could do something like this:

class TestForm(forms.Form):

    choices=(('Value1', 'Choice1'), 
             ('Value2', 'Choice2'), 
             ('Value3', 'Choice3')
             ..
            )

    options = forms.ChoiceField(widget=forms.RadioSelect, choices=choices)

Access your form in the views.py:

def my_view(request):
    # your code here

    return render(request, 'your_app/template.html', form=TestForm())

Then in your template, template.html file:

<form action='/place_url_here', method='POST'>
    {% csrf_token %}
    <div class="funkyradio">
        {% for radio in form.options %}
            <div class="funky-{{ radio.choice_label }}">
                {{ radio.tag }}
                <label for="{{ radio.id_for_label }}">{{ radio.choice_label }}</label>
            </div>
        {% endfor %}
    </div>
</form>

Based on the above, you can modify the styles to get your desired results.

Hope that helps. Good Luck.

Upvotes: 1

Related Questions