Widgets

Easiest way to change widget for specific fields is define your own ModelForm class with Meta class and widgets. Following this logic, you can override almost any widget in your form.

For example if you want to add some additional CSS class to input you can do following:

from django.forms import ModelForm, TextInput
from django.contrib.admin import ModelAdmin
from .models import Country

class CountryForm(ModelForm):
    class Meta:
        widgets = {
            'name': TextInput(attrs={'class': 'input-mini'})
        }

class CountryAdmin(ModelAdmin):
    form = CountryForm
    ...

admin.site.register(Country, CountryAdmin)

Note

If you define some custom fields for your form, you must specify model = YourModel parameter for class Meta.

NumberInput

HTML5 number input type="number":

from django.forms import ModelForm
from suit.widgets import NumberInput

class OrderForm(ModelForm):
    class Meta:
        widgets = {
            'count': NumberInput,

            # Optionally you specify attrs too
            'count': NumberInput(attrs={'class': 'input-mini'})

        }

Note

The same result you can achieve with HTML5Input(input_type='number') widget, this is just a shortcut.

HTML5Input

Specify input_type and use any of HTML5 input types. You can see some HTML5 input examples in Django Suit Demo app in KitchenSink forms:

from django.forms import ModelForm
from suit.widgets import HTML5Input

class ProductForm(ModelForm):
    class Meta:
        widgets = {
            'color': HTML5Input(input_type='color'),
        }

Note

Not all major browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields. Also not all types are supported by Twitter Bootstrap.

EnclosedInput

Supports Twitter Bootstrap prepended/appended form inputs. EnclosedInput widget accepts two arguments prepend= and append=. Values can be text, icon-class or html (starts with html tag). You can also use both prepend= and append= together:

from django.forms import ModelForm
from suit.widgets import EnclosedInput

class ProductForm(ModelForm):
    class Meta:
        widgets = {

            # Appended by text
            'discount': EnclosedInput(append='%'),
            'size': EnclosedInput(append='m<sup>2</sup>'),

            # By icons
            'email': EnclosedInput(append='icon-envelope'),
            'user': EnclosedInput(prepend='icon-user'),

            # You can also use prepended and appended together
            'price': EnclosedInput(prepend='$', append='.00'),

            # Use HTML for append/prepend (See Twitter Bootstrap docs of supported tags)
            'url': EnclosedInput(prepend='icon-home', append='<input type="button" class="btn"  value="Open link">'),

        }

Preview:

_images/enclosed_input.png

AutosizedTextarea

AutosizedTextarea enables automatic height based on user input for textarea elements. Uses jQuery Autosize plugin. All the required javascript will be automatically attached. Usage:

from django.forms import ModelForm
from suit.widgets import AutosizedTextarea

class ProductForm(ModelForm):
    class Meta:
        widgets = {
            'description': AutosizedTextarea,

            # You can also specify html attributes
            'description': AutosizedTextarea(attrs={'rows': 3, 'class': 'input-xlarge'}),
        }

For demo - see countries description field or kitchensink tabluar inlines

Note

If you want to change height, when vertical scrollbar appears, use CSS max-height attribute. By default: max-height: 150px

Date/Time widgets

SuitDateWidget, SuitTimeWidget and SuitSplitDateTimeWidget extends original admin widgets by adding some additional output styling only. Widgets still uses same original JavaScript for calendar and time. You can see example in Demo app: User changeform:

from django.forms import ModelForm
from suit.widgets import SuitDateWidget, SuitTimeWidget, SuitSplitDateTimeWidget

class UserChangeForm(UserChangeForm):
    class Meta:
        model = User
        widgets = {
            'last_login': SuitSplitDateTimeWidget,
            'date_joined': SuitSplitDateTimeWidget,
        }

Preview:

_images/dates.png

LinkedSelect

Adds link to related item right after select for foreign key fields:

from django.forms import ModelForm
from suit.widgets import LinkedSelect

class CountryForm(UserChangeForm):
    class Meta:
        widgets = {
            'continent': LinkedSelect
        }

Preview:

_images/linked_select.png

JavaScript goodies

When working with Django inlines and JavaScript, very often we want to hook/attach to event - when new inline row is added. Django Suit gives us such chance.

Use JavaScript SuitAfterInline.register to register/attach your function to new inline addition event.

$(function () {
    SuitAfterInline.register('my_unique_func_name', function(inline_prefix, row){
        // Your code here
        console.info(inline_prefix)
        console.info(row)
    });
});

CSS goodies

Original collapse and wide fieldset classes are also supported by Django Suit. Usage:

from django.contrib.admin import ModelAdmin

class CountryAdmin(admin.ModelAdmin):
    ...
    fieldsets = [
        (None, {'fields': ['name', 'description']}),

        ('Advanced settings', {
            'classes': ('collapse',),  # Specify fieldset classes here
            'fields': ['hidden_checkbox', 'hidden_choice']}),
    ]
  • collapse CSS class makes fieldset collapsable:

    collapse

  • wide CSS class makes fieldset labels wider

  • full-width CSS class hides field label and makes field controls in full width (useful for wysiwyg editors). Because label will be hidden, this class is intended to use one field per fieldset and fieldset title will be used as field title.

    _images/full-width.png

Table Of Contents

Previous topic

Configuration

Next topic

Sortables

This Page