Ändern Sie die Breite von Formularelementen, die mit ModelForm in Django erstellt wurden

Wie kann ich die Breite eines Textarea-Formularelements ändern, wenn ich es mit ModelForm erstellt habe?

Hier ist meine Produktklasse:

class ProductForm(ModelForm):
    long_desc = forms.CharField(widget=forms.Textarea)
    short_desc = forms.CharField(widget=forms.Textarea)
    class Meta:
        model = Product

Und der Vorlagencode …

{% for f in form %}
    {{ f.name }}:{{ f }}
{% endfor %}

f ist das eigentliche Formularelement…

Der einfachste Weg für Ihren Anwendungsfall ist die Verwendung von CSS. Es ist eine Sprache, die dazu gedacht ist, Präsentationen zu definieren. Sehen Sie sich den vom Formular generierten Code an, notieren Sie sich die IDs der Felder, die Sie interessieren, und ändern Sie das Aussehen dieser Felder über CSS.

Beispiel für long_desc Feld in Ihrem ProductForm (wenn Ihr Formular kein benutzerdefiniertes Präfix hat):

#id_long_desc {
    width: 300px;
    height: 200px;
}

Zweiter Ansatz ist, die zu übergeben attrs Schlüsselwort zu Ihrem Widget-Konstruktor.

class ProductForm(ModelForm):
    long_desc = forms.CharField(widget=forms.Textarea(attrs={'cols': 10, 'rows': 20}))
    short_desc = forms.CharField(widget=forms.Textarea)
    class Meta:
        model = Product

Es ist in der Django-Dokumentation beschrieben.

Dritter Ansatz ist es, die nette deklarative Schnittstelle von Newforms für eine Weile zu verlassen und Ihre Widget-Attribute im benutzerdefinierten Konstruktor festzulegen.

class ProductForm(ModelForm):
    long_desc = forms.CharField(widget=forms.Textarea)
    short_desc = forms.CharField(widget=forms.Textarea)
    class Meta:
        model = Product

    # Edit by bryan
    def __init__(self, *args, **kwargs):
        super(ProductForm, self).__init__(*args, **kwargs) # Call to ModelForm constructor
        self.fields['long_desc'].widget.attrs['cols'] = 10
        self.fields['long_desc'].widget.attrs['rows'] = 20

Diese Vorgehensweise hat folgende Vorteile:

• Sie können Widget-Attribute für Felder definieren, die automatisch aus Ihrem Modell generiert werden, ohne ganze Felder neu zu definieren.
• Es hängt nicht vom Präfix Ihres Formulars ab.

Ausgezeichnete Antwort von zuber, aber ich glaube, dass der Beispielcode für den dritten Ansatz einen Fehler enthält. Der Konstruktor sollte sein:

def __init__(self, *args, **kwargs):
    super(ProductForm, self).__init__(*args, **kwargs) # Call to ModelForm constructor
    self.fields['long_desc'].widget.attrs['cols'] = 10
    self.fields['long_desc'].widget.attrs['cols'] = 20

Die Field-Objekte haben keine ‘attrs’-Attribute, aber ihre Widgets schon.

Für den Fall, dass Sie ein Add-On wie Grappelli verwenden, das Stile stark nutzt, stellen Sie möglicherweise fest, dass alle überschriebenen Zeilen- und Spaltenattribute ignoriert werden, weil CSS-Selektoren auf Ihr Widget wirken. Dies könnte passieren, wenn Sie den ausgezeichneten zweiten oder dritten Ansatz von zuber oben verwenden.

Verwenden Sie in diesem Fall einfach den ersten Ansatz gemischt mit dem zweiten oder dritten Ansatz, indem Sie anstelle der Attribute „rows“ und „cols“ ein „style“-Attribut festlegen.

Hier ist ein Beispiel für die Änderung drin im dritten Ansatz oben:

def __init__(self, *args, **kwargs):
    super(ProductForm, self).__init__(*args, **kwargs) # Call to ModelForm constructor
    self.fields['short_desc'].widget.attrs['style'] = 'width:400px; height:40px;'
    self.fields['long_desc'].widget.attrs['style']  = 'width:800px; height:80px;'

Legen Sie die Zeile und Ihre CSS-Klasse in Ihrer Admin-Modellansicht fest:

'explicacion': AutosizedTextarea(attrs={'rows': 5, 'class': 'input-xxlarge', 'style': 'width: 99% !important; resize: vertical !important;'}),