Expandable Textareas in Django

I’m probably not the first one to think of this, but when your writing long posts (like this one) it’s nice to have an expandable text area. This little hack makes use of the jQuery Textarea Resizer plugin. You’ll need to download it along with jQuery and put them somewhere in your media directory.

Make a copy of the base_site.html template in django/contrib/admin/templates/admin/base_site.html and put it in your apps local template path.

Add the following template block to /admin/base_site.html

{% block extrahead %}

    div.grippie {
        background:#EEEEEE url({{ MEDIA_URL }}js/textarea_resize/grippie.png) no-repeat scroll center 2px;
        border-color:#DDDDDD;
        border-style:solid;
        border-width:0pt 1px 1px;
        cursor:s-resize;
        height:9px;
        overflow:hidden;
        margin-left: 106px;
    }
    textarea {
        display:block;
        margin-bottom:0pt;
        width:95%;
        height: 20%;
    }




    $(document).ready(function() {
         $('textarea:not(.processed)').TextAreaResizer();
	});

{% endblock %}

And now you should have nice expandable text-areas that look like this one:

Expandable Textarea

Advertisements