come ridimensionare il widget django ManyToManyField nella pagina di amministrazione

Question

Sto provando a ridimensionare un campo molti a molti dell'amministratore di django 1.8.

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

Come potete vedere ho provato 3 approcci:

1: usando formfield_overrides. Non ha fatto alcuna differenza.

2: caricamento di un javascript per ridimensionare l'oggetto html. Si sta accendendo ma non lo ridimensiona perché lo script sembra funzionare prima che il widget sia caricato.

3: utilizzando get_form. Come mostrato di seguito, ridimensiona solo una delle caselle di selezione.

Qualcuno sa come ridimensionare in orizzontale?

UPDATE: ho scoperto che:

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

    } 

avrebbe funzionato da quando ho rimosso filter_horizontal ma voglio utilizzare filter_horizontal! Se non sbaglio, l'opzione filter_horizontal utilizzerà il multiWidget che apparentemente non passa gli attributi di override ai sotto-widget. Ancora, penso che ci deve essere una soluzione in cui posso eseguire un javascript dopo il caricamento della pagina. help

Answer 1

È possibile ridimensionare il widget sostituendo gli stili CSS.

Avrai bisogno di sostituire le seguenti classi CSS:

1. .selector - questo div contiene sia i widget.

2. .selctor-available - questo div contiene il widget a sinistra.

3. .selector-chosen - questo div contiene il widget sulla destra.

In primo luogo, creare un file CSS denominato resize-widget.css all'interno della directory del progetto static. Aggiungere il seguente codice al file:

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

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

.selector select { 
    width: 200px; 
} 

.selector { 
    width: 450px; 
} 

In admin.py, offerta che file CSS tramite class Media: Site Admin

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

visita.Il selezionare widget deve assomigliare a questo:

Answer 2

ho cercato xyres rispondono che non ha funzionato, ma alcune delle regole CSS venivano sovrascritto da altre norme che hanno usato selettori più specifici.

Per correggere questo ho modificato resize-widget.css al seguente:

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

Queste norme più specifiche non venivano ignorate e ha fatto il lavoro per me.