Login

bigger textfields in admin panel

Author:
jedie
Posted:
September 28, 2007
Language:
HTML/template
Version:
Not specified
Score:
3 (after 3 ratings)

Sometimes a textarea field is to small for usage. I add some JavaScript and CSS to resize all textareas a little dynamically: The JS change the size in dependence text-lengthen.

You should store this snippet into a file like this: templates_django/admin/base_site.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{% extends "admin/base.html" %}

{% block footer %}
<script type="text/javascript">
/* <![CDATA[ */
function textarea_resize() {
    //
    // Resize all textareas
    //
    textareas = document.getElementsByTagName("textarea");
    for (var i = 0; i <= textareas.length-1; i++) {
        try {
            textarea = textareas[i];
            try {
                rows = textarea.firstChild.data.split("\n").length;
                if (rows > 30) {
                    rows = 30;
                }
            } catch(e) {
                rows = 5;
            }
            textarea.rows = rows;
        } catch (e) {
            alert("textarea_resize() error:" + e);
        }
    }
}
textarea_resize()
/* ]]> */
</script>
<style type="text/css">
textarea {
    font-family: monospace;
}
.colM .aligned .vLargeTextField, .colM .aligned .vXMLLargeTextField {
    width:80%;
}
</style>
{% endblock %}

More like this

  1. Bootstrap Accordian by Netplay4 7 years, 9 months ago
  2. Bootstrap theme for django-endless-pagination? by se210 10 years, 9 months ago
  3. Bootstrap theme for django-endless-pagination? by se210 10 years, 9 months ago
  4. Reusable form template with generic view by roldandvg 10 years, 10 months ago
  5. Pagination Django with Boostrap by guilegarcia 11 years ago

Comments

capolise (on October 11, 2008):

At line 16 maybe you mean "if (rows < 30) {"

#

sitaktif (on February 10, 2010):

Thanks, works perfectly !

I'd make a small change (line 16) to have a minimum size concerning the textbox (useful when we are creating a new object) 

 if (rows < 20) {
      rows = 20;
 }
 else if (rows > 30) {
      rows = 30;
 }

#

Please login first before commenting.