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

votos
48

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

Aqui é a 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 real ...

Publicado 21/09/2008 em 07:15
fonte usuário
Em outras línguas...                            


4 respostas

votos
102

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 mudar a aparência desses campos através de CSS.

Exemplo de long_desccampo em seu ProductForm (quando o formulário não tem um prefixo personalizado):

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

Segunda abordagem é passar a attrspalavra-chave para 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 .

Terceira abordagem é deixar a interface declarativa agradável de newforms por um tempo e definir seus atributos de widgets 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 atributos de widgets 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.
Respondeu 21/09/2008 em 07:44
fonte usuário

votos
15

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 têm atributos não 'attrs', mas seus widgets fazer.

Respondeu 12/03/2009 em 23:02
fonte usuário

votos
5

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 abordagem Segunda ou Terceira de zuber acima.

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

Aqui está um exemplo modificando o 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;'
Respondeu 07/08/2014 em 22:08
fonte usuário

votos
0

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;'}),
Respondeu 02/03/2018 em 08:36
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more