it-swarm.com.de

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

Wie kann ich die Breite eines Textfeld-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 ...

50
Josh Hunt

Der einfachste Weg für Ihren Anwendungsfall ist die Verwendung von CSS. Es ist eine Sprache, die zur Definition der Präsentation gedacht ist. Sehen Sie sich den von form generierten Code an, notieren Sie sich die IDs der Felder, die Sie interessieren, und ändern Sie das Erscheinungsbild dieser Felder durch CSS.

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

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

Second Ansatz besteht darin, das Schlüsselwort attrs an Ihren Widget-Konstruktor zu ü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 der Django-Dokumentation beschrieben .

Der dritte Ansatz besteht darin, die 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

Dieser Ansatz hat folgende Vorteile:

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

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 Attribute 'attrs', ihre Widgets jedoch.

15
bryan

Für den Fall, dass Sie ein Add-On wie Grappelli verwenden, das Stile häufig verwendet, stellen Sie möglicherweise fest, dass überschriebene Zeilen- und Spaltenattribute ignoriert werden, da in Ihrem Widget CSS-Selektoren verwendet werden. Dies kann passieren, wenn Sie zubers exzellenten zweiten oder dritten Ansatz verwenden.

Verwenden Sie in diesem Fall einfach den ersten Ansatz, der entweder mit dem zweiten oder dritten Ansatz vermischt wird, indem Sie anstelle der Attribute 'row' und 'cols' ein 'style'-Attribut festlegen.

Hier ist ein Beispiel zum Ändern von 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;'
6
bergdesign

Legen Sie Zeile und Ihre CSS-Klasse in Ihrer Administratormodellansicht fest:

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