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

Posted 2023-02-24

【中文标题】如何在 Django 的 fieldset.html 中调整网格

【英文标题】：How to adjust grid in Django's fieldset.html

【发布时间】：2012-04-10 02:56:21

【问题描述】：

这是我提出的关于修改 Django 管理表单的问题的后续：

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

如果按照 Django 网站上的教程进行操作，就好像标签“问题：”与应该输入问题的编辑框重叠。

相关代码好像在/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>

任何 cmets 将不胜感激，

谢谢

【问题讨论】：

肯定不是 HTML 定义了宽度，而是 CSS。

【参考方案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'）添加到您的字段集中。

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)

我的.css：

.extra_wide label  width: 300px; 

fieldset 的优点是可以使用 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 属性选择器。但如果有更多长标签，我会使用带有“wide”和“extrapretty”或自定义类（“extra_wide”）的字段集。但大多数时候，我会尝试通过使用较短的标签、help_text 和在字段集中对字段进行分组来避免这个问题。

这是否回答了您的问题？希望对你有帮助。

【参考方案2】：

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

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

希望对你有帮助。

【讨论】：

好吧，这可能会暴露出我有多笨，但是我应该把它放在哪个文件中？我一直在削减大量 Django 文件。我将尝试对 .form-row 进行一些 grepping，看看我能做什么，但有一种感觉，我可能会错过正确的文件。无论如何，谢谢你的建议。希望我能弄清楚把它放在哪里。 （或者，如果您知道，请随时在此处发布 - 我可能找不到它......再次感谢......）

我会创建一个新的 css 文件，然后在您的自定义 fieldset.html 顶部链接到它。我认为包含额外的标题元素或类似的东西是有障碍的。