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

我正在尝试调整django 1.8 admin的多对多字段的大小。如何在管理页面上调整django ManyToManyField小部件

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。如下所示，它只调整其中一个选择框的大小。

有谁知道如何调整水平呢？

UPDATE： 我发现：因为我删除filter_horizontal

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

    }

的工作，但我想用filter_horizontal！如果我没有弄错，filter_horizontal选项将使用MultiWidget，它显然不会将override属性传递给子小部件。不过，我认为必须有一个解决方案，我可以在页面加载后运行javascript。 plz help

来源

2016-02-04 max

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

你需要重写以下CSS类：

.selector - 这个div包含两个部件。
.selctor-available - 此div包含左侧的小部件。
.selector-chosen - 此div包含右侧的小部件。

首先，在项目的static目录中创建一个名为resize-widget.css的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',)` 
     }

访问管理站点。选择小部件必须是这样的：

来源

2016-02-14 10:38:04 xyres

谢谢。有效。 – max

我试图xyres回答，并发现它的工作，但一些CSS规则正在通过使用更具体选择其他规则覆盖。

为了解决这个问题我修改resize-widget.css以下几点：

.form-horizontal .control-group .controls .selector { 
    width: 100%; 
} 

.form-horizontal .control-group .controls .selector .selector-available, 
.form-horizontal .control-group .controls .selector .selector-chosen { 
    max-width: 45%; 
} 

.form-horizontal .control-group .controls .selector select { 
    min-height: 200px; 
}

这些更具体的规则没有被覆盖，并使其为我工作。

来源

2018-01-05 04:45:22 ModestLeech

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

回答

相关问题