Question

这是我询问有关修改Django管理员表单的问题的后续行动：

我刚刚在Django中创建了一个模型，并希望使用管理表单为其输入信息。我遇到的问题是我的字段名称太长，以至于它们与要输入其值的编辑框重叠。

如果有人遵循Django网站上的教程，那就像标签＆＃34;问题：＆＃34;重叠编辑框，其中一个人应该输入一个问题。

相关代码似乎位于/admin/includes/fieldset.html中。我已经编辑到了：

<fieldset class="module aligned {{ fieldset.classes }}">
    {% if fieldset.name %}<h2>{{ fieldset.name }} - Foo Test</h2>{% endif %}
    {% for line in fieldset %}
        <div class="form-row{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
              {% for field in line %}
                <div>
                   {{ field.label_tag }}{{ field.field }}
                </div>
              {% endfor %} 
        </div>
    {% endfor %}
</fieldset>

我无法弄清楚如何做以强制它为{{field.label_tag}}提供更多空间，并将{{field.field}}移到右侧。

如果它有用，那么这是生成的相关（我相信）html：

<div class="form-row field-numInvestments">             
   <div>
     <label for="id_numInvestments" class="required">NumInvestments:</label><input id="id_numInvestments" type="text" class="vIntegerField" value="8000" name="numInvestments" />
   </div>
</div>

非常感谢任何评论，

由于

Answer 1

您无需编辑HTML。无需覆盖fieldset.html或其他管理模板。

您想要做的是：

确保您可以使用css选择器选择标签;
添加CSS样式表。

您可以使用以下css选择标签：

/* attribute selector selecting only the label with for="id_numInvestments" */    
label[for="id_numInvestments"] { width: 300px; }

或

/* Applies to all labels in fieldset with class='field-numInvestments' */
.field-numInvestments label { width: 300px; }

在静态目录（/path/to/my.css）中的某处创建一个新的css文件。此样式表的内容应该是上面的css选择器之一。

要将此样式表包含在管理员“添加”和“更改”页面的标题中，请向您的ModelAdmin添加“类媒体”：

admin.py

class MyModelAdmin(admin.ModelAdmin):
    ...
    class Media:
        css = {
            'all': ('/path/to/my.css',)
        }
admin.site.register(MyModel, MyModelAdmin)

注意：'all'适用于所有媒体类型。您还可以使用“屏幕”，“打印”，“投影”等。

完成！

作为替代方案，Django提供了一种通过admin.py向域集添加css类的方法。

默认的管理样式表包含'wide'和'extrapretty'css类。它们为您的管理员“添加”和“更改”页面提供了广泛而又简洁的外观。这个外观有更广泛的标签！所以，如果你很幸运，设置这些就足够了，你不需要添加自定义样式表！：）

要为字段集设置css类，您需要在ModelAdmin中定义字段集。

admin.py：

class MyModelAdmin(admin.ModelAdmin):
    ...
   fieldsets = (
        (None, {
            'classes': ('wide', 'extrapretty'),
            'fields': ('numInvestments', '...' ) # And all other fields.
        }),

admin.site.register(MyModel, MyModelAdmin)

如果'wide'，'extrapretty'是不够的，请使用'fieldsets'将自定义css类（'extra_wide'）添加到您的fieldset。

admin.py：

   class MyModelAdmin(admin.ModelAdmin):
        ...
       fieldsets = (
            (None, {
                'classes': ('extra_wide', ),
                'fields': ('numInvestments', 'other_field_with_wide_label' )
            }),

            (None, {
                'fields': ('other_field', '...' ) # All other fields.
            }),
        )
        class Media:
            css = {
                'all': ('/path/to/my.css',)
            }

    admin.site.register(MyModel, MyModelAdmin)

my.css：

.extra_wide label { width: 300px; }

fieldsets的优点是你可以使用django的默认css或只创建一次样式表。其余部分由admin.py控制。因此，对于多次出现的宽标签，这样做会更好。

另一种选择：避免问题。

1）缩短标签时间并使用“help_text”来解释您的字段：

models.py：

numInvestments = models.IntegerField('Your total number of investments')

将是：

numInvestments = models.IntegerField('Investments', 
    help_text="Your total number of investments.")

2）只需缩短标签并使用字段集将标题放在字段上方，以解释此字段的内容：

models.py：

numInvestments = models.IntegerField('Number')

admin.py：

   class MyModelAdmin(admin.ModelAdmin):
        ...
       fieldsets = (
            ('Investments', {
                'fields': ('numInvestments', )
            }),
        )
    admin.site.register(MyModel, MyModelAdmin)

如果我真的需要一个长标签，我会使用css atrribute选择器，这是一个独特的例外。但是如果有更多的长标签，我会使用带有'wide'和'extrapretty'或自定义类（'extra_wide'）的fieldset。但大多数时候我会尝试通过使用较短的标签，help_text和带有标题的字段集中的字段来避免此问题。

这回答了你的问题吗？我希望它有所帮助。

Answer 2

我相信你不能从代码中做到这一点。您所要做的就是在标签上添加一些CSS。这样的事情可以解决问题：

fieldset .form-row label {
    width: <YourWidthHere>px;
}

希望它有所帮助。

如何在Django的fieldset.html中调整网格

2 个答案: