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 5 years, 10 months ago
  2. Bootstrap theme for django-endless-pagination? by se210 8 years, 10 months ago
  3. Bootstrap theme for django-endless-pagination? by se210 8 years, 10 months ago
  4. Reusable form template with generic view by roldandvg 8 years, 11 months ago
  5. Pagination Django with Boostrap by guilegarcia 9 years, 1 month 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.