2017-12-04 27 views
0

私はUIkitでWTFormラジオ入力のスタイルを設定しようとしていますが、各フィールドをループするときに、クラスを適用する方法を理解できません。 form.difficulty(class_"uk-radio")をループのforに追加すると、フォーマットされたフィールドの代わりにクレイジーな出力が得られます。このUIkitクラスをWTForm内のラジオ・フィールドに適用するための正しい構文は何ですか?WTForm Radioフィールドにクラスを追加するにはどうすればよいですか?

ありがとうございます!

HTML:

{% from "_formhelpers.html" import render_field %} 
<form class="uk-grid-small uk-background-muted uk-padding" action="/ask/" method="post" uk-grid> 
    <div class="[email protected] uk-margin-small">{{ render_field(form.title,placeholder="The Problem", class_="uk-input") }}</div><br> 

    <div class="uk-width-1-1 uk-margin-small"> 
     <strong>Question Difficulty:</strong> 
     <br> 
     {% for subfield in form.difficulty(class_="uk-radio") %} 
      <tr> 
       <td>{{ subfield.label }}</td> 
       <td>{{ subfield }}</td> 
       &nbsp;&nbsp;&nbsp;&nbsp; 
      </tr> 
     {% endfor %} 
    </div> 
    <br> 

    <div class="uk-width-1-1 uk-margin-small"> 
     {{ render_field(form.body,placeholder="My device probably has a virus. I clicked the wrong link, and I have like a million popups a minute now. Minute.tech HELP! I need some direction here guys.", class_="uk-textarea", rows="20", cols="100") }} 
    </div> 
    <br> 
    <div class="uk-width-1-1 uk-margin-small">{{ render_field(form.tags,placeholder="Mac, virus, Facebook, etc", class_="uk-input") }}</div> 
    <br> 
    <div class="[email protected] uk-margin-small"> 
     <input class="uk-button uk-button-primary" type="submit" value="Ask"> 
    </div> 
</form> 

Pythonの

class AskForm(Form): 
    difficulty = RadioField('Difficulty Rating', choices = [('1','1'), ('2','2'),('3','3'),('4','4'),('5','5')]) 
    title = TextField('Title:', [validators.Length(min=5, max=100)]) 
    body = TextAreaField('Desciption:', [validators.Length(min=10, max=2000)]) 
    tags = TextField('Tags:', [validators.Optional()]) 

結果:

Results from adding class to WTForm radio

EDIT: {{ render_field(form.difficulty, class_="uk-input") }}を試してみましたが、出力はまだスタイルの垂直フォーマットされていない

結果:

enter image description here

答えて

1

何のサブフィールドがありません、difficultyは、複数の選択肢を持つ一つのフィールドです。
他のフィールドと同様にレンダリングすればうまくいくはずです。

{{ render_field(form.difficulty, class_="uk-input") }} 
+0

試しました。ラジオボタンはスタイリングされておらず、水平ではなく横に表示されます(ポストで出力が更新されます) – douglasrcjames

+0

プレゼンテーションの問題です。フォームとフィールドはインテントとして機能しています。 – leovp

+0

Gotcha、私はWTFormsのラジオフィールドにクラスを追加できないと提案していますか?たぶん、私は本当に無線フィールドの入力を確認する必要はないので、Flaskの 'request'フィールドを組み合わせて試してみることもあります – douglasrcjames

関連する問題