Cambiar el ancho de los elementos de formulario creados con ModelForm en Django

Question

¿Cómo puedo cambiar el ancho de un elemento de formulario textarea si utilicé ModelForm para crearlo?

Aquí es mi clase de productos:

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

Y el código de la plantilla ...

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

f es el elemento de forma real ...

Answer 1

La forma más fácil para su caso de uso es usar CSS. Es un lenguaje destinado a definir la presentación. Mire el código generado por el formulario, tome nota de los identificadores para los campos que le interesan y cambie la apariencia de estos campos a través de CSS.

Ejemplo para long_desc campo en su ProductForm (cuando el formulario no tiene un prefijo personalizado):

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

segundo enfoque es pasar la palabra clave attrs a su constructor de widgets.

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 described in Django documentation.

El tercer enfoque es dejar la agradable interfaz declarativa de newforms por un tiempo y establecer los atributos del widget en el constructor personalizado.

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 

Este enfoque tiene las siguientes ventajas:

• Puede definir widget de atributos para los campos que se generan automáticamente a partir de su modelo sin redefinir campos enteros.
• No depende del prefijo de su formulario.

Answer 2

Excelente respuesta de zuber, pero creo que hay un error en el código de ejemplo para el tercer enfoque. El constructor debe ser:

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 

Los objetos Field no tienen atributos 'attrs', pero sí sus widgets.

Answer 3

En caso de que esté utilizando un complemento como Grappelli que hace un uso intensivo de los estilos, es posible que los atributos de fila y col anulados se ignoren debido a los selectores de CSS que actúan en su widget. Esto podría ocurrir cuando se utiliza el excelente segundo o tercer enfoque de zuber anterior.

En este caso, simplemente use el Primer Enfoque combinado con el Segundo o Tercer Enfoque estableciendo un atributo 'estilo' en lugar de los atributos 'filas' y 'cols'.

He aquí un ejemplo modificando init en el tercer enfoque anterior:

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

Conjunto fila y su clase CSS en la vista administrador modelo:

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