如何在管理页面上调整django ManyToManyField小部件的大小

Question

我正在尝试调整django 1.8 admin的多对多字段.

models.py

from django.db import models

class Material(models.Model):
    type = models.CharField(max_length=20, primary_key=True)
    def __unicode__(self):
        return self.type


class Pen(models.Model):
    label = models.CharField(max_length=20, blank=True, default='')
    materials = models.ManyToManyField(Material)

admin.py

from django.contrib import admin
from django.conf.urls import url
from .models import *
from django.forms import SelectMultiple

@admin.register(Pen)
class PenAdmin(admin.ModelAdmin):
    filter_horizontal = ('materials',)
    #formfield_overrides = { models.ManyToManyField: {'widget': SelectMultiple(attrs={'size':'5', 'width': '50px', 'style': 'width:50px'})}, }

    def get_form(self, request, obj=None, **kwargs):
        form = super(PenAdmin, self).get_form(request, obj, **kwargs)
        form.base_fields['materials'].widget.attrs['style'] = 'width: 70px;'
        return form

    class Media:
        js = ("js/resize_fields.js",)

@admin.register(Material)
class MaterialAdmin(admin.ModelAdmin):
    pass

resize_fields.js

document.onload = function() {
  document.getElementById("id_materials_to").style.width="70px";
};

如你所见,我尝试了3种方法:

1:使用formfield_overrides.它没有任何区别.

2:加载javascript来调整html对象的大小.它正在启动但没有调整大小,因为脚本似乎在加载小部件之前运行.

3:使用get_form.如下所示,它仅调整其中一个选择框的大小.

有谁知道如何水平调整大小？

更新: 我发现:

class PenAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.ManyToManyField: {'widget': SelectMultiple(attrs={'size':'5', 'style': 'color:blue;width:250px'})},

    }

我会删除filter_horizo​​ntal但我想使用filter_horizo​​ntal!如果我没有弄错的话,filter_horizo​​ntal选项将使用MultiWidget,它显然没有将覆盖属性传递给子窗口小部件.不过,我认为必须有一个解决方案,我可以在页面加载后运行JavaScript.请帮助

Answer 1

您可以通过覆盖CSS样式来调整窗口小部件的大小.

您需要覆盖以下CSS类:

1. .selector - 这个div包含两个小部件.

2. .selctor-available - 这个div包含左边的小部件.

3. .selector-chosen - 这个div包含右边的小部件.

首先,创建一个resize-widget.css在项目static目录中调用的CSS文件.将以下代码添加到文件中:

.selector-available,
.selector-chosen {
    width: 200px;
}

.selector .selector-available input {
    width: 184px;
}

.selector select {
    width: 200px;
}

.selector {
    width: 450px;
}

在admin.py中,通过class Media以下方式提供该CSS文件:

@admin.register(Pen)
class PenAdmin(admin.ModelAdmin):
    filter_horizontal = ('materials',)

    class Media:
        css = {
            'all': ('resize-widget.css',), # if you have saved this file in `static/css/` then the path must look like `('css/resize-widget.css',)`
        }

访问管理站点.select小部件必须如下所示: