ProgProg

One of the biggest annoyances of the Django admin app is the filter box on the right. Not its functionality—that is great. It’s the way it appears on top of the data, obscuring the rightmost columns. I generally hold the designers of Django in great regard, so I am kind of surprised they let something like this slip by.

Recently I was playing around with jQuery, and decided one of the things I could do with it is fix this problem. It doesn’t take too much code, with most of it boilerplate.

First, grab jQuery. Put it wherever you house the rest of your javascript files.

Next, decide the scope of apps/models you would like this change to apply to. See Customizing the Django admin in the Django book for more details. In this mini-tutorial I assume you would like to apply this change to one app. In that case, the code would go in:

<your template dir>/admin/<app_label>/change_list.html

By creating this template, you are telling Django to override all change lists in the Django admin for app <app_label> with that file.

And here’s the code:

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

{% block extrahead %}
  <script type="text/javascript" src="YOUR_JS_DIR/jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#changelist-filter h2").click(function() {
        $("#changelist-filter ul").slideToggle("fast");
        $("#changelist-filter h3").slideToggle("fast");
      });
    });
  </script>
{% endblock %}

What this code does is add an event handler to the “Filter” heading at the very top of the filter list. Upon clicking this, it uses slideToggle() to hide or show the filter names (h3) and filter lists (ul). slideToggle() works by adjusting the height of the elements to toggle their visibility.

You don’t want to override the goodness that is already in the default change_list, so all you have to do is extend this template and add some javascript to the extrahead block.

And that’s it! Now you can hide the filter when it’s blocking columns you want to see fully.