Как настроить сетку в fieldset Dhango.html - PullRequest
1 голос
/ 26 марта 2012

Это продолжение вопроса, который я задал об изменении форм администрирования 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>

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

Спасибо

Ответы [ 2 ]

3 голосов
/ 29 марта 2012

Вам не нужно редактировать 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-файл где-нибудь в вашем статическом каталоге (/path/to/my.css). Содержимое этой таблицы стилей должно быть одним из указанных выше селекторов CSS.

Чтобы включить эту таблицу стилей в заголовки страниц администратора "добавить" и "изменить", добавьте "класс Media" в свой 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 'wide' и 'extrapretty'. Они дают вашему администратору «добавить» и «изменить» страницы широкий и необычный вид. Этот взгляд имеет более широкие ярлыки! Так что, если вам повезет, их достаточно, и вам не нужно добавлять собственную таблицу стилей! :) 1030 * *

Чтобы установить класс 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)

my.css:

.extra_wide label { width: 300px; }

Преимущество наборов полей заключается в том, что вы можете использовать стандартную CSS django или создать таблицу стилей только один раз. Остальное контролируется формой 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, если мне действительно нужен длинный ярлык, и это уникальное исключение. Но если есть более длинные метки, я бы использовал fieldset с 'wide' и 'extrapretty' или пользовательским классом ('extra_wide'). Но большую часть времени я пытался избежать этой проблемы, используя более короткие метки, help_text и группируя поля в наборах полей с заголовками.

Это ответило на ваш вопрос? Надеюсь, это поможет.

1 голос
/ 26 марта 2012

Я полагаю, что вы не можете сделать это из кода.Все, что вам нужно сделать, это добавить немного CSS к вашим ярлыкам.Нечто подобное поможет:

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

Надеюсь, это поможет.

...