A 2-column Django-admin form

Django is great. The bundled admin interface makes it better. But as the number of items on the form gets bigger, the amount of wasted space increases because the layout is single column. Coupled with left alignment on wide-screen monitors, my users usually end their day with a condition we call “eyeballs misalignment”.

So I improvised and changed the form (and StackedInline) to a 2-up layout. No more “eyeballs misalignment”.

The corresponding template for Django 1.2.1 (/contrib/admin/templates/admin/includes/fieldset.html) looks like this, modified lines highlighted:

<fieldset class="module aligned {{ fieldset.classes }}">
    {% if fieldset.name %}<h2>{{ fieldset.name }}</h2>{% endif %}
    {% if fieldset.description %}
        <div class="description">{{ fieldset.description|safe }}</div>
    {% endif %}
    <table border=0 width=100%>
    {% for line in fieldset %}
        {% cycle '<tr>' '' %}
        <td width=50%>
        <div style="border-bottom:0" class="form-row{% if line.errors %} errors{% endif %}{% for field in line %} {{ field.field.name }}{% endfor %}">
            {{ line.errors }}
            {% for field in line %}
                <div{% if not line.fields|length_is:"1" %} class="field-box"{% endif %}>
                    {% if field.is_checkbox %}
                        {{ field.field }}{{ field.label_tag }}
                    {% else %}
                        {{ field.label_tag }}
                        {% if field.is_readonly %}
                            <p>{{ field.contents }}</p>
                        {% else %}
                            {{ field.field }}
                        {% endif %}
                    {% endif %}
                    {% if field.field.field.help_text %}
                        <p class="help">{{ field.field.field.help_text|safe }}</p>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
        </td>
        {% cycle '' '</tr>' %}
    {% endfor %}
    </table>
</fieldset>

BUT, here’s the caveat: TextField will mess up the layout a bit due to CSS. And since I do not use TextField extensively, I prefer to leave it at that (minimal hacking). Please leave a comment if anyone find other field types that do not display/work properly.

p/s: All hail source code posting!
Posting Source Code « Support — WordPress.com

Advertisements

7 thoughts on “A 2-column Django-admin form

  1. I found a nice simple way of doing this using fieldsets without having any CSS problems (with the help of this article!). Hopefully it can help others.

    Say I have 3 ‘sections’ on the admin form and I want the first two sections to appear side by side, and the third section can take up the full width of the screen below the first two.

    1. Create a fieldset in admin.py for each ‘section’. (I created 3 fieldsets.) (https://docs.djangoproject.com/en/1.10/ref/contrib/admin/#django.contrib.admin.ModelAdmin.fieldsets)
    2. Override the change_form.html for your model, and add the text below. (https://docs.djangoproject.com/en/1.10/ref/contrib/admin/#overriding-admin-templates)

    {% extends “admin/change_form.html” %}
    {% load i18n admin_urls %}

    {% block field_sets %}
    {% for fieldset in adminform %}

    {% cycle ” ” ” ”%}
    {% cycle ” ” ” ”%}
    {% cycle ” ” ” ”%}

    {% include “admin/includes/fieldset.html” %}

    {% cycle ” ” ” ”%}
    {% cycle ” ” ” ”%}
    {% cycle ” ” ” ”%}

    {% endfor %}
    {% endblock %}

    • Looks like the html elements were removed in my answer above.
      The cycles above should look like the following, except all the text between quotes should be also enclosed in angle brackets.

      {% cycle ‘table border=0 width=100%’ ” ” ”%}
      {% cycle ‘tr’ ” ” ”%}
      {% cycle ‘td width =50%’ ‘td width =50%’ ” ”%}

      {% cycle ‘/td’ ‘/td’ ” ”%}
      {% cycle ” ‘/tr’ ” ”%}
      {% cycle ” ‘/table’ ” ”%}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s