djangoのサイズを変更する方法管理ページのManyToManyFieldウィジェット

Question

私はdjango 1.8の管理者の多くのフィールドのサイズを変更しようとしています。

1：あなたが見ることができるように

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つのアプローチを試してみました使用してformfield_overrides。それは何の違いもありませんでした。

2：htmlオブジェクトのサイズを変更するためのjavascriptを読み込みます。ウィジェットがロードされる前にスクリプトが実行されているように見えるので、起動していますがサイズを変更していません。

3：get_formを使用しています。下に示すように、選択ボックスの1つのみのサイズを変更します。

誰もが水平方向にサイズを変更する方法を知っていますか？

UPDATE：私はfilter_horizo​​ntal削除以来

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

    } 

が働くだろうが、私はfilter_horizo​​ntalを使用したい：私はことを発見し ！ 私が誤解していない場合、filter_horizo​​ntalオプションは、上書き属性をサブウィジェットに渡していないと思われるMultiWidgetを使用します。 まだ、ページが読み込まれた後にjavascriptを実行できるソリューションが必要だと思います。 plz help

Answer 1

CSSスタイルをオーバーライドすることによってウィジェットのサイズを変更できます。

次のCSSクラスをオーバーライドする必要があります：

1. .selectorを - このdivが両方のウィジェットが含まれています。

2. .selctor-available - このdivには、左側のウィジェットが含まれています。

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

訪問のadminサイト。選択ウィジェットは次のようになります。

Answer 2

私はxyres答えをしようと、それが働いていたが、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; 
} 

これらのより具体的なルールが上書きされていなかった、それは私のために働かせた：

はこれを修正するために、私は次のように resize-widget.cssを変更しました。