如何Django的fieldset.html調整電網

Question

這是一個後續的問題，我問有關修改Django的管理形式：

我剛剛創建在Django模型，並要使用管理表單爲它輸入信息。我遇到的問題是，我的字段名稱太長，以至於它們與要輸入其值的編輯框重疊。

如果你按照Django網站上的教程，就好像標籤「Question：」重疊了應該輸入問題的編輯框。

相關代碼似乎位於/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

我相信你不能從代碼中完成。所有你需要做的是添加一些CSS到你的標籤。類似的東西會做的伎倆：

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

希望它能幫助。

Answer 2

您不需要編輯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; } 

創建一個新的CSS文件的地方在靜態目錄（/路徑/要/我的。 CSS）。 此樣式表的內容應該是上面的一個css選擇器。

要包含這個樣式表給管理員「添加」和「改變」的網頁添加一個「類媒體」您的ModelAdmin的標題：

admin.py

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

注：「所有'適用於所有媒體類型。您也可以使用'屏幕'，'打印'，'投影'等。

完成！

作爲替代方案Django提供了一種通過admin.py將css類添加到字段集的方法。

默認管理樣式表包含'wide'和'extrapretty'css類。他們給你的管理員'添加'和'改變'頁面寬泛和extrapretty外觀。這個外觀有更廣泛的標籤！所以如果你幸運的話，設置這些就足夠了，你不需要添加自定義樣式表！ :)

要爲字段集設置css類，您需要在ModelAdmin中定義字段集。

admin.py：

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

admin.site.register(MyModel, MyModelAdmin) 

如果 '寬'， 'extrapretty' 是不夠的，用 '字段集' 到自定義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) 

my.css：

.extra_wide label { width: 300px; } 

字段集的好處是，你可以使用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'）的字段集。但大多數情況下，我會嘗試通過使用較短的標籤，幫助文本和字段集中的字段來避免此問題。

這是回答您的問題嗎？我希望它有幫助。