[Django]-Placing a <select> field using Django templates with custom bootstrap styles

by

3👍

✅

1) If you’re using model forms, do one one this:
Use django widget_tweaks and then in your template do this:

{% load widget_tweaks %}

<label>{{my_form.field.label}}</label>
{% render_field my_form.field class="mdb-select" name="field" %}

OR

class NewSomethingForm(ModelForm):
class Meta:
    model = Account
    fields = ['name', 'last_name', 'description']

def __init__(self, *args, **kwargs):
    self.fields['description'].widget = forms.Textarea(attrs={'class': 'md-textarea', 'style': 'height: 75px'})`enter code here`

2) If you’re not using model forms, then in your template, try this:

<select type="select" class="mdb-select" id="fieldOne" name=field>
    <option value="my_form.field_name.field.choices.0">my_form.field_name.field.choices.1</option>
    <!–– follow same sequence -- >
</select>

Don’t forget to give the dropdown element a name that matches the field on the form.

👤DeA

2👍

You can render a select field using Django ModelChoiceField. When you use this form in template using {{yourForm.select_field_name}} it will be rendered as with

id:id_select_field_name

name:select_field_name

The css classes you need to associate are included in attrs 

from django import forms
class yourForm(forms.Form):
    select_field_name=forms.ModelChoiceField(queryset=recieptDetail.objects.all(), widget = forms.Select(attrs = {'class':"class-name",'onchange' : "jsFunction();"}))
👤Abhijith Konnayil

Leave a comment