0

내 양식에서 'django-multiselectfield'를 사용하여 사용자가 내 양식에서 여러 개의 '영역'을 선택할 수 있습니다. 지금 내가 알고 싶은 것은 CSS를 사용하여 multiselectfield를 어떻게 스타일링 할 수 있는가이다.CSS로 django-multiselectfield 스타일을 지정하는 방법

나는 일반적으로 모델 필드의 모든 다른 유형처럼 단순히 내 템플릿에 양식 필드에 클래스를 추가하는 시도했지만 운이 :

{% render_field form.area class="area" %} 

어떤 도움은 많이 인정되지 않을 것입니다.

답변

0

이것은 `django-multiselectfield' 문서에 설명되어 있습니다. 구체적으로는

양식 템플릿에서이 위젯의 ​​HTML을 사용자 정의 할 수 있습니다. 이렇게하려면 양식 {field}.field.choices을 반복해야합니다. 다음은 providers이라는 providers이라는 확인란의 필드 라벨을 표시하는 예입니다.

+0

감사합니다. Jason. 나는 아직도 장고 - 멀티 셀렉트 필드의 체크 박스 스타일을 고민하고있다. 각 확인란의 스타일을 지정할 수 있습니다 (예 : ). 그러나 입력란의 스타일을 지정하려고 할 때 (예 : ), 작동하지 않습니다. 어떤 도움을 주시면 감사하겠습니다! –

0

다음은 내가 한 일례입니다.

{% for field in form %} 
    <div class="fieldWrapper">{{ field.errors }} 
    <input type="{{ field.field.widget.input_type }}" name="{{ field.html_name }}" id="{{field.id_for_label}}" class="col-12 input-login" placeholder="{{field.label}}" > 
    {% if field.help_text %} 
     <p class="help">{{ field.help_text|safe }}</p> 
    {% endif %} 
    </div> 
{% endfor %} 

이제 간단한 html 입력 필드 인 것처럼 필드를 사용자 정의 할 수 있습니다. 이 page에는 상세한 설명이 있습니다. 비터

했네은 ------ 편집 -----

거의 잊어 버렸습니다. 이것은 일반적인 양식의 예입니다. django-multiselectfield의 공식 문서를 통해 필드 속성 이름을 가져와 해당 속성을 바꿔야합니다.

+0

감사합니다. Vipin. 나는 아직도 장고 - 멀티 셀렉트 필드의 체크 박스 스타일을 고민하고있다. 각 확인란의 스타일을 지정할 수 있습니다 (예 : ). 그러나 입력란의 스타일을 지정하려고 할 때 (예 : ), 작동하지 않습니다. 어떤 도움을 주시면 감사하겠습니다! –

+0

먼저 django 기본 폼을 사용하고 브라우저의 코드를 검사하여 렌더링 된 일반 HTML 코드를 확인하고 이들을 기록하고 특히 입력 속성 및 form_id, 입력 ID 등을 기록한 다음 양식을 사용자 정의하고 위의 모든 속성이 나타나는지 확인하십시오. 예 : 체크 박스 ID, 값 등 –

+0

일단 폼에 걸리면, 나는 모든 형식을 넣었지만 field.value를 설정하는 것을 잊었습니다. –

0

양식을 수동으로 렌더링하고 루프를 반복하는 것이 좋습니다.

당신이 질문 모델에 외래 키와 선택 모델을 말해봐, 당신은 이런 식으로 그것을 할 수 :

<form class="qform" action="" method="post"> 
    {% csrf_token %} 
    <p class="title">{{ form.question }}</p> 
    {% for choice in form.choice_set.all %} 
     <input type="checkbox" name="{{ choice }}" id="{{ choice }}{{ forloop.counter }}" 
       value="{{ choice.id }}"> 
     <label for="{{ choice }}{{ forloop.counter }}">{{ choice }}</label> 
    {% endfor %} 
</form> 
당신이 입력 및 라벨을 참조 할 수 있습니다

당신의 style.css 같은 :

input[type="checkbox"]{ 
    some: stuffs...; 
} 

label { 
    some: stuffs...; 
} 

도움이되기를 바랍니다.

+0

안녕하세요 bunya, 나는 이것을 시도했지만 여전히 운이 없습니다. 내 현재 코드는 다음과 같습니다. {% for value, text in form.area.field.choices %}

{% endfor %}'그리고 여기 내 CSS'.area_text { font-family : 'Roboto', sans- 가는 장식 선; } #area_input { border-radius : 0px; }'라벨 (area_text)을 멋지게 스타일링 할 수는 있지만 입력 체크 박스를 전혀 스타일링 할 수 없습니다. 어떤 도움이라도 좋을 것입니다! –

+0

@WillDpard 모델, 뷰 및 양식에서 coce를 게시 할 수 있습니까? – bunya

관련 문제