Как настроить сетку в fieldset.html Джанго

Question

Этого наблюдения на вопрос, я спросил об изменении администратора формы Джанго:

Я только что создал модель в 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> 

Все комментарии будут с благодарностью,

Благодаря

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 предоставляет способ добавления классов CSS в поля с помощью admin.py.

В таблице стилей администратора по умолчанию содержатся классы «широкий» и «экстрапотентный». Они дают вашему администратору «добавить» и «изменить» страницы широкий и экстрапрессовый вид. Этот взгляд имеет более широкие ярлыки! Поэтому, если вам повезет, их достаточно, и вам не нужно добавлять пользовательскую таблицу стилей! :)

Чтобы установить класс 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' не является достаточным, используйте '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 в том, что вы можете использовать по умолчанию 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, если я действительно нужен длинный ярлык, и это единственное исключение. Но если есть более длинные метки, я использую набор полей с «широким» и «экстрапотентным» или специальным классом («extra_wide»). Но большую часть времени я пытался избежать этой проблемы, используя короткие метки, help_text и группируя поля в полях с названиями.

Это ответ на ваш вопрос? Я надеюсь, что это помогает.