CODEWITHSUNDEEP
cssdjangoformsradio-buttoncss-multicolumn-layout
Raja
Raja

Reputation: 71

Django Radio Buttons in Columns

I have a radio button with n choices, the choices themselves being picked up from a Database.

Forms.py

class FilterForm(forms.Form):
    DressTable = mydb['DressInfo']
    ColorTable =mydb['ColorInfo']
    dress = forms.ChoiceField(widget=forms.RadioSelect,choices=[(obj['subcatvalue'], obj['subcategory']) for obj in DressTable.find({})])
    color = forms.ChoiceField(widget=forms.RadioSelect,choices=[(obj['subcatvalue'], obj['subcategory']) for obj in ColorTable.find({})])

This is my views.py

def dayview(request): 
    form = FilterForm()
    return render(request, 'searchpage.html',{'form': form})

This is my template file searchpage.html

<form method="post" action="SearchDisplay" id="searchFilter">

<div id="checkbox">
    <ul>
        {{ form.dress }}
    </ul>
</div>

<div id="checkbox">
    <ul>
        {{ form.color}}
    </ul>
</div>
</form>

I want the choices to be displayed as radio buttons in two columns per row, equally spaced. I have tried crispy options, but that is for the entire form I guess.

How do I get the desired result like shown :

2ColumnRadio

Upvotes: 1

Views: 301

Answers (1)

Raja
Raja

Reputation: 71

Achieved it by adding the following to the template file

.radiobuttons-container {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

Upvotes: 1

Related Questions