Django에서 ModelForm으로 생성된 양식 요소의 너비 변경

StackOverflow https://stackoverflow.com/questions/110378

문제

ModelForm을 사용하여 텍스트 영역을 만든 경우 텍스트 영역 양식 요소의 너비를 어떻게 변경할 수 있습니까?

내 제품 클래스는 다음과 같습니다.

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

그리고 템플릿 코드는...

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

f 실제 양식 요소입니다...

도움이 되었습니까?

해결책

사용 사례에 가장 쉬운 방법은 CSS를 사용하는 것입니다..프리젠테이션을 정의하기 위한 언어입니다.양식에서 생성된 코드를 살펴보고 관심 있는 필드의 ID를 기록해 두고 CSS를 통해 이러한 필드의 모양을 변경하세요.

예 long_desc ProductForm의 필드(양식에 사용자 정의 접두사가 없는 경우):

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

두 번째 접근 방식 통과하는 것입니다 attrs 위젯 생성자에 대한 키워드입니다.

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

그것은 Django 문서에 설명되어 있음.

세 번째 접근 방식 잠시 동안 newforms의 멋진 선언적 인터페이스를 그대로 두고 사용자 정의 생성자에서 위젯 속성을 설정하는 것입니다.

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

이 접근 방식에는 다음과 같은 장점이 있습니다.

  • 전체 필드를 다시 정의하지 않고도 모델에서 자동으로 생성된 필드에 대한 위젯 속성을 정의할 수 있습니다.
  • 양식의 접두어에 의존하지 않습니다.

다른 팁

zuber의 훌륭한 답변이지만 세 번째 접근 방식의 예제 코드에 오류가 있다고 생각합니다.생성자는 다음과 같아야 합니다.

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

Field 객체에는 'attrs' 속성이 없지만 해당 위젯에는 있습니다.

스타일을 많이 사용하는 Grappelli와 같은 추가 기능을 사용하는 경우 위젯에서 작동하는 CSS 선택기로 인해 재정의된 행 및 열 속성이 무시될 수 있습니다.위의 zuber의 뛰어난 두 번째 또는 세 번째 접근 방식을 사용할 때 이런 일이 발생할 수 있습니다.

이 경우 'rows' 및 'cols' 속성 대신 'style' 속성을 설정하여 두 번째 또는 세 번째 접근 방식과 혼합된 첫 번째 접근 방식을 사용하면 됩니다.

다음은 수정하는 예입니다. 초기화 위의 세 번째 접근 방식에서:

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;'

관리 모델 보기에서 행과 CSS 클래스를 설정합니다.

'explicacion': AutosizedTextarea(attrs={'rows': 5, 'class': 'input-xxlarge', 'style': 'width: 99% !important; resize: vertical !important;'}),
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top