widgets tipos personalizados formularios fields ejemplos avanzados python html django django-forms django-templates

python - tipos - post django



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

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

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 forma real ...


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.


En el caso de que esté usando 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 mezclado con el Segundo o Tercer Enfoque estableciendo un atributo ''estilo'' en lugar de los atributos ''filas'' y ''columnas''.

Aquí hay un ejemplo de modificación de 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;''


La forma más fácil para su caso de uso es usar CSS . Es un lenguaje destinado a definir la presentación. Observe 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 el campo long_desc en su ProductForm (cuando su formulario no tiene un prefijo personalizado):

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

El 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

Está descrito en la documentación de Django .

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 atributos de widget para campos que se generan automáticamente a partir de su modelo sin redefinir campos completos.
  • No depende del prefijo de tu formulario.