Ändern der Breite der Formelemente geschaffen mit Modelform in Django

Question

Wie kann ich die Breite eines Textbereich Formularelement ändern, wenn ich Modelform verwendet, es zu schaffen?

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 Template-Code ...

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

f ist das eigentliche Formelement ...

Answer 1

Der einfachste Weg für Ihren Anwendungsfall ist CSS zu verwenden . Es ist eine Sprache zur Definition Präsentation gemeint. Schauen Sie sich den Code generiert durch Form, beachten Sie bitte die IDs für Felder, die Sie interessieren, und ändern Aussehen dieser Felder durch CSS.

Beispiel für long_desc Feld in Ihrem Product (wenn das Formular nicht über ein benutzerdefiniertes Präfix):

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

Zweiter Ansatz ist das attrs Stichwort zu Ihrem Widget-Konstruktor übergeben.

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 Django-Dokumentation .

Third Ansatz ist die schöne deklarative Schnittstelle von newforms für eine Weile zu verlassen und stellen Sie Ihre Widget-Attribute in benutzerdefinierter Konstruktor.

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

Dieser Ansatz hat folgende Vorteile:

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

Answer 2

Ausgezeichnete Antwort von Zuber, aber ich glaube, es ist ein Fehler in dem Beispielcode für den dritten Ansatz. 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 Feldobjekte haben keine 'attrs' Attribute, aber ihre Widgets tun.

Answer 3

Für den Fall, dass ein Add-on wie Grappelli verwenden, die starke Nutzung von Arten macht, können Sie feststellen, dass alle überschriebenen Zeile und Spalte Attribute wegen CSS-Selektoren ignoriert erhalten auf Ihrem Widget handeln. Dies könnte passieren, wenn sie über Zuber hervorragende zweiten oder dritten Ansatz.

In diesem Fall einfach den ersten Ansatz mit gemischt verwenden entweder dem zweiten oder dritten Ansatz durch einen ‚Stil‘ Einstellung anstelle der ‚Zeilen‘ Attribut und ‚Spalten‘ Attribute.

Hier ist ein Beispiel Modifizieren init 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;'

Answer 4

Stellen Zeile und Ihre CSS-Klasse in Ihrer Admin-Modellansicht:

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