Modifica la larghezza degli elementi del modulo creati con ModelForm in Django

Question

Come posso modificare la larghezza di un elemento modulo textarea se ho usato ModelForm per crearlo?

Ecco la mia classe di prodotto:

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

E il codice modello ...

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

f è l'elemento modulo reale ...

Answer 1

Il modo più semplice per il tuo caso d'uso è usare i CSS . È una lingua pensata per definire la presentazione. Guarda il codice generato dal modulo, prendi nota degli ID per i campi che ti interessano e modifica l'aspetto di questi campi tramite CSS.

Esempio di campo long_desc nel ProductForm (quando il modulo non ha un prefisso personalizzato):

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

Secondo approccio è passare la parola chiave attrs al costruttore del 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

È descritto nella documentazione di Django .

Terzo approccio è lasciare la piacevole interfaccia dichiarativa di newforms per un po 'e impostare gli attributi del widget nel costruttore personalizzato.

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

Questo approccio presenta i seguenti vantaggi:

• È possibile definire gli attributi del widget per i campi generati automaticamente dal modello senza ridefinire interi campi.
• Non dipende dal prefisso del modulo.

Answer 2

Ottima risposta di zuber, ma credo che ci sia un errore nel codice di esempio per il terzo approccio. Il costruttore dovrebbe essere:

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

Gli oggetti Field non hanno attributi 'attrs', ma i loro widget lo fanno.

Answer 3

Nel caso in cui si stia utilizzando un componente aggiuntivo come Grappelli che fa un uso intenso degli stili, è possibile che eventuali attributi di riga e col sovrascritti vengano ignorati a causa dei selettori CSS che agiscono sul widget. Questo potrebbe accadere quando si utilizza l'eccellente secondo o terzo approccio di zuber sopra.

In questo caso, usa semplicemente il Primo Approccio miscelato con il Secondo o il Terzo Approccio impostando un attributo 'stile' invece degli attributi 'righe' e 'cols'.

Ecco un esempio che modifica init nel Terzo approccio sopra:

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

Imposta riga e la tua classe css nella vista del modello di amministratore:

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