在 django admin 中控制 TextArea 小部件的大小 [英] Control the size TextArea widget look in django admin

问题描述

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

使用 formfield_overrides

在admin.py中:

class RulesAdmin(admin.ModelAdmin):formfield_overrides = {models.TextField: {'widget': Textarea(attrs={'行': 1,'cols': 40})},}...admin.site.register(规则，RulesAdmin)

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

使用自定义表单:

在 forms.py 中:

from django.forms import ModelForm, Textarea从 TimePortal.models 导入规则类规则模型表单(模型表单):元类:模型 = 规则小部件 = {'参数':Textarea(attrs = {'cols':30，'rows':1})，}

在admin.py

从 AppName.forms 导入 RulesModelForm类规则管理员(admin.ModelAdmin):表格 = 规则模型表格

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

 <div class="form-row field-parameters">
<label for="id_parameters" class="required">参数:</label><textarea id="id_parameters" rows="1" cols="30" name="parameters">{}</textarea><p class="help">输入有效的 Python 字典</p></div></div>

这是一个截图:

根据文本区域的W3C参考:

<块引用>

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

所以，我的问题是:

• 是django自己的css主题负责这里的奇数"这个小部件的行为?
• 有人可以提出解决此问题的方法吗?

解决方案

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

根据线程 textarea 的高度不匹配 Firefox 中的行:

<块引用>

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

你可以设置textarea的style属性:

从 django.db 导入模型从 django.forms 导入 Textarea类规则管理员(admin.ModelAdmin):formfield_overrides = {models.TextField: {'widget': Textarea(attrs={'行': 1,列":40，'风格': '高度: 1em;'})},}

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

希望对您有所帮助.

I managed to override the look of a TextArea Widget in the django admin interface with two different ways:

using formfield_overrides

in admin.py:

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

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

This way is a bit of an overkill, since it will change all the TextField for that model.

with a custom form:

in 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}),
   }

in admin.py

from AppName.forms import RulesModelForm

class RulesAdmin(admin.ModelAdmin):

    form = RulesModelForm

Both solutions resize the TextArea. However in both solutions the actual size of the text area is more than 1 row (actually 2 rows). Here is how the rendered HTML looks like:

    <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>

And here is a screentshot:

According to W3C referecnce for text area:

The size of a textarea can also be specified by the CSS height and width properties.

So, my questions are:

• Is django's own css theme is the responsible here for the "odd" behavior of this widget?
• Can some suggest a way to solve this issue?

解决方案

This is a browser-specific problem.

According to the thread Height of textarea does not match the rows in Firefox:

Firefox always adds an extra line after the textfield. If you want it to have a constant height, use CSS ...

You can set a style attribute of the textarea:

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;'})},
    }

Works for me - tested on Firefox v. 23 and Chrome v. 29.

Hope that helps.

这篇关于在 django admin 中控制 TextArea 小部件的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！