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

Question

¿Cómo puedo cambiar el ancho de un área de texto del elemento de formulario si he utilizado ModelForm para crear?

Aquí está mi clase de producto:

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 formulario...

Answer 1

La forma más sencilla para el caso de uso es el uso de CSS.Es un lenguaje significó para la definición de la presentación.Mirar el código generado por el formulario, tomar nota de los identificadores de los campos que le interesan, y cambiar 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 método es para pasar el attrs la palabra clave para su widget constructor.

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 se describe en la documentación de Django.

Tercer enfoque es dejar el agradable declarativa de la interfaz de newforms por un tiempo y establecer el widget de los atributos 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:

• Usted puede definir los atributos de los controles para los campos que se generan automáticamente a partir de su modelo sin la redefinición de los campos.
• No depende de que el prefijo de su forma.

Answer 2

Excelente respuesta por 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

El Campo de los objetos no tienen 'attrs' atributos, pero sus widgets hacer.

Answer 3

En el caso de que usted está usando un add-on como Grappelli que hace un uso intensivo de los estilos, usted puede encontrar que cualquier reemplazado fila y col atributos son ignorados porque de selectores CSS que actúe en su widget.Esto puede suceder cuando el uso de zuber excelente Segundo o Tercer enfoque de arriba.

En este caso, basta utilizar el Primer Enfoque mezclado con el Segundo o Tercer Enfoque mediante el establecimiento de un 'estilo' atributo en lugar de la 'filas' y 'cols' atributos.

He aquí un ejemplo de la modificación de init en el Tercer Enfoque de arriba:

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 de filas y de su clase css en su admin vista de modelo:

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