在 django admin 中控制 TextArea 小部件的大小

Question

我设法用两种不同的方式覆盖了 django 管理界面中 TextArea 小部件的外观：

使用 formfield_overrides

在admin.py:

class RulesAdmin(admin.ModelAdmin):
formfield_overrides = {
    models.TextField: {'widget': Textarea(
                       attrs={'rows': 1,
                              'cols': 40})},
}

...
admin.site.register(Rules, RulesAdmin)

这种方式有点矫枉过正，因为它会改变所有的 TextField 型号。

使用自定义表单：

在forms.py:

from django.forms import ModelForm, Textarea
from TimePortal.models import Rules


class RulesModelForm(ModelForm):
    class Meta:
        model = Rules
        widgets = {
            'parameters': Textarea(attrs={'cols': 30, 'rows': 1}),
   }

在admin.py

from AppName.forms import RulesModelForm

class RulesAdmin(admin.ModelAdmin):

    form = RulesModelForm

两种解决方案都会调整 TextArea 的大小。然而，在这两种解决方案中的实际大小 文本区域超过 1 行（实际上是 2 行）。以下是呈现的 HTML 的样子：

    <div class="form-row field-parameters">
            <div>
                <label for="id_parameters" class="required">Parameters:</label>
                <textarea id="id_parameters" rows="1" cols="30" name="parameters">{}</textarea> 
           <p class="help">Enter a valid Python Dictionary</p>
         </div>
    </div>

这是一个截图：

根据W3C referecnce for text area：

文本区域的大小也可以通过 CSS 的 height 和 width 属性来指定。

所以，我的问题是：

• 是django自己的css主题负责这里的“奇数” 这个小部件的行为？
• 能否提出解决此问题的方法？

Answer 1

这是一个特定于浏览器的问题。

根据线程Height of textarea does not match the rows in Firefox：

Firefox 总是在文本字段之后添加一个额外的行。如果你想要的话 要获得恒定的高度，请使用 CSS ...

你可以设置textarea的style属性：

from django.db import models
from django.forms import Textarea

class RulesAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.TextField: {'widget': Textarea(
                           attrs={'rows': 1,
                                  'cols': 40,
                                  'style': 'height: 1em;'})},
    }

适合我 - 在 Firefox v. 23 和 Chrome v. 29 上测试。

希望对您有所帮助。