Widgets — Django Suit 0.1.8 documentation

### Navigation

- index
- next |
- previous |
- Django Suit 0.1.8 documentation »

# 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:

# 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:

# 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:

# 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:

- `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.

### Navigation

- index
- next |
- previous |
- Django Suit 0.1.8 documentation »