Modifier la largeur des éléments de formulaire créés avec ModelForm dans Django

Question

Comment puis-je modifier la largeur d'un élément de formulaire textarea si j'ai utilisé ModelForm pour le créer ?

Voici ma classe de produits :

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

Et le code du modèle...

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

f est l'élément réel du formulaire...

Answer 1

Le moyen le plus simple pour votre cas d'utilisation est d'utiliser CSS . C'est un langage destiné à définir la présentation. Regardez le code généré par le formulaire, notez les identifiants des champs qui vous intéressent, et modifiez l'apparence de ces champs par le biais de CSS.

Exemple pour long_desc dans votre ProductForm (lorsque votre formulaire n'a pas de préfixe personnalisé) :

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

Deuxième approche est de passer attrs au constructeur de votre widget.

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

C'est décrit dans la documentation de Django .

Troisième approche est de laisser la belle interface déclarative de newforms pour un moment et de définir les attributs de votre widget dans le constructeur personnalisé.

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

Cette approche présente les avantages suivants :

• Vous pouvez définir des attributs de widget pour les champs qui sont générés automatiquement à partir de votre modèle sans redéfinir des champs entiers.
• Cela ne dépend pas du préfixe de votre formulaire.

Answer 2

Excellente réponse de zuber, mais je crois qu'il y a une erreur dans le code d'exemple pour la troisième approche. Le constructeur devrait être :

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

Les objets Field n'ont pas d'attributs 'attrs', mais leurs widgets en ont.