如何在管理頁面上調整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小部件

回答

相關問題