Resize Fields In Django Admin

February 28, 2024 Post a Comment

Django tends to fill up horizontal space when adding or editing entries on the admin, but, in some cases, is a real waste of space, when, i.e., editing a date field, 8 characters w

Solution 1:

You should use ModelAdmin.formfield_overrides.

It is quite easy - in admin.py, define:

from django.formsimportTextInput, Textareafrom django.dbimport models

classYourModelAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.CharField: {'widget': TextInput(attrs={'size':'20'})},
        models.TextField: {'widget': Textarea(attrs={'rows':4, 'cols':40})},
    }

admin.site.register(YourModel, YourModelAdmin)

Solution 2:

You can set arbitrary HTML attributes on a widget using its "attrs" property.

You can do this in the Django admin using formfield_for_dbfield:

classMyModelAdmin(admin.ModelAdmin):defformfield_for_dbfield(self, db_field, **kwargs):
    field = super(ContentAdmin, self).formfield_for_dbfield(db_field, **kwargs)
    if db_field.name == 'somefield':
      field.widget.attrs['class'] = 'someclass ' + field.widget.attrs.get('class', '')
    return field

or with a custom Widget subclass and the formfield_overrides dictionary:

classDifferentlySizedTextarea(forms.Textarea):def__init__(self, *args, **kwargs):
    attrs = kwargs.setdefault('attrs', {})
    attrs.setdefault('cols', 80)
    attrs.setdefault('rows', 5)
    super(DifferentlySizedTextarea, self).__init__(*args, **kwargs)

classMyModelAdmin(admin.ModelAdmin):
  formfield_overrides = { models.TextField: {'widget': DifferentlySizedTextarea}}

Solution 3:

To change the width for a specific field.

Made via ModelAdmin.get_form:

classYourModelAdmin(admin.ModelAdmin):
    defget_form(self, request, obj=None, **kwargs):
        form = super(YourModelAdmin, self).get_form(request, obj, **kwargs)
        form.base_fields['myfield'].widget.attrs['style'] = 'width: 45em;'return form

Solution 4:

A quick and dirty option is to simply provide a custom template for the model in question.

If you create a template named admin/<app label>/<class name>/change_form.html then the admin will use that template instead of the default. That is, if you've got a model named Person in an app named people, you'd create a template named admin/people/person/change_form.html.

All the admin templates have an extrahead block you can override to place stuff in the <head>, and the final piece of the puzzle is the fact that every field has an HTML id of id_<field-name>.

So, you could put something like the following in your template:

{% extends "admin/change_form.html" %}

{% block extrahead %}
  {{ block.super }}
  <styletype="text/css">#id_my_field { width: 100px; }
  </style>
{% endblock %}

Solution 5:

If you want to change the attributes on a per-field instance, you can add the "attrs" property directly in to your form entries.

for example:

classBlogPostForm(forms.ModelForm):
    title = forms.CharField(label='Title:', max_length=128)
    body = forms.CharField(label='Post:', max_length=2000, 
        widget=forms.Textarea(attrs={'rows':'5', 'cols': '5'}))

    classMeta:
        model = BlogPostfields= ('title', 'body')

The "attrs" property basically passes along the HTML markup that will adjust the form field. Each entry is a tuple of the attribute you would like to override and the value you would like to override it with. You can enter as many attributes as you like as long as you separate each tuple with a comma.

howtostartbloggingformoney