How to resize django ManyToManyField Widget auf der Admin-Seite

Question

Ich versuche, ein Viel zu viele Bereich von Django 1.8 Admin Größe.

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"; 
}; 

Wie man sehen kann ich versuchte, 3 Ansätze:

1: using formfield_overrides. Es machte keinen Unterschied.

2: Laden eines Javascript, um die Größe des HTML-Objekts zu ändern. Es wird zwar hochgefahren, aber nicht skaliert, da das Skript scheinbar vor dem Laden des Widgets ausgeführt wird.

3: mit get_form. Wie unten gezeigt, ändert es nur die Größe eines der Auswahlfelder.

Wer weiß, wie es horizontal zu skalieren?

UPDATE: Ich entdeckte, dass:

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

    } 

funktionieren würde, da ich filter_horizontal entfernt, aber ich will filter_horizontal nutzen zu können! Wenn ich mich nicht irre, verwendet die filter_horizontal-Option das MultiWidget, das Override-Attribute offenbar nicht an Sub-Widgets übergibt. Dennoch denke ich, es muss eine Lösung geben, wo ich nach dem Laden der Seite ein Javascript ausführen kann. plz help

Answer 1

Sie können die Größe des Widgets ändern, indem Sie CSS-Stile überschreiben.

Sie müssen die folgenden CSS-Klassen außer Kraft zu setzen:

1. .selector - das div enthält sowohl die Widgets.

2. .selctor-available - dieses div enthält das Widget auf der linken Seite.

3. .selector-chosen - dieses div enthält das Widget auf der rechten Seite.

Erstellen Sie zunächst eine CSS-Datei resize-widget.css in Ihrem Projekt static Verzeichnis. Fügen Sie den folgenden Code in die Datei:

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

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

.selector select { 
    width: 200px; 
} 

.selector { 
    width: 450px; 
} 

In admin.py, die Lieferung, die CSS-Datei über class Media:

@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',)` 
     } 

Besuchen Admin-Seite.Die select-Widget muss wie folgt aussehen:

Answer 2

Ich versuchte xyres beantworten und fand, dass es funktionierte, aber einige der CSS-Regeln wurden von anderen Regeln, die spezifischeren Selektoren verwendet außer Kraft gesetzt werden.

Um dies zu beheben, modifizierte ich resize-widget.css auf die folgenden:

.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; 
} 

Diese spezifischeren Regeln wurden sie für mich nicht außer Kraft gesetzt werden und machte arbeiten.