Question

我正在尝试使用UIkit为WTForm Radio输入设置样式，但是当遍历每个字段时，我无法弄清楚如何应用该类。如果我将form.difficulty(class_"uk-radio")添加到for循环，我会得到一个疯狂的输出而不是格式化的字段。将此UIkit类应用于WTForm中的无线电字段的正确语法是什么？

谢谢！

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="uk-width-1-2@s 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="uk-width-1-4@s 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()])

结果：

编辑：尝试{{ render_field(form.difficulty, class_="uk-input") }}，输出仍然垂直格式化而没有样式

结果：

Answer 1

没有子字段，difficulty是一个有多个选择的字段像任何其他字段一样呈现它，它应该工作。

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

Answer 2

通过这种方式，我能够实现水平布局

<div class="uk-input">
    <table>
        <tr><td> {{form.difficulty.label}} </td></tr>
        <tr>
        {% for subfield in form.difficulty %}

            <td>{{ subfield }}
            {{ subfield.label }}</td>


        {% endfor %}
      </tr>
      </table>
</div>

Answer 3

旧问题，但这是您的操作方式：

 <div class="uk-input">
        
             {{form.difficulty.label}}
            
            {% for subfield in form.difficulty %}
    
                {{ subfield(class="class name") }}
                {{ subfield.label }}
   
            {% endfor %}  
    
    </div>

您也可以对标签执行相同的操作

 {{ subfield.label(class="class name") }}

如何向WTForm Radio字段添加类？

3 个答案: