Alterar a largura de elementos de formulário criado com ModelForm no Django

Question

Como posso alterar a largura de um elemento de formulário textarea se eu usei ModelForm para criá-lo?

Aqui está minha classe de produto:

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

E o código do modelo ...

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

f é o elemento de formulário actual ...

Answer 1

A maneira mais fácil para o seu caso de uso é usar CSS . É uma linguagem significou para a definição de apresentação. Olhe para o código gerado pelo formulário, tome nota dos ids para os campos que lhe interessam, e mudança aparecimento desses campos através de CSS.

Exemplo de campo long_desc em sua ProductForm (quando o formulário não tem um prefixo personalizado):

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

Segunda abordagem é passar a palavra-chave attrs ao seu construtor de 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

É descrito na documentação do Django .

Third abordagem é deixar a interface declarativa agradável de newforms por um tempo e definir atributos de seu widget no construtor 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

Esta abordagem tem as seguintes vantagens:

• Você pode definir os atributos Widget para campos que são gerados automaticamente a partir de seu modelo sem redefinindo campos inteiros.
• Ele não depende do prefixo do seu formulário.

Answer 2

Excelente resposta por Zuber, mas eu acredito que há um erro no código de exemplo para a terceira abordagem. O construtor deve 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

Os objetos de campo tem nenhum atributo 'attrs', mas seus widgets fazer.

Answer 3

No caso em que você está usando um add-on como Grappelli que faz uso pesado de estilos, você pode achar que todos os atributos de linha e col substituídos são ignoradas por causa de seletores CSS agindo em seu widget. Isso pode acontecer quando se utiliza excelente Segunda ou Terceira abordagem da zuber acima.

Neste caso, basta usar a primeira abordagem misturado com quer a segunda ou terceira abordagem, definindo um atributo 'estilo' em vez das 'linhas' e atributos 'cols'.

Aqui está um exemplo modificando init Na terceira abordagem acima:

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

Definir linha e sua classe css na sua opinião modelo admin:

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