CODEWITHSUNDEEP
flaskuikitjinja2wtforms
douglasrcjames_old
douglasrcjames_old

Reputation: 73

How do I add a class to WTForm Radio field?

I am attempting to style my WTForm Radio inputs with UIkit, but when looping through each field, I can't figure out how to get the class to apply. If I add the form.difficulty(class_"uk-radio") to the for loop, I get a crazy output instead of the formatted field. What is the proper syntax to apply this UIkit class to the radio field within a WTForm?

Thanks!

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()])

Results:

Results from adding class to WTForm radio

EDIT: Tried {{ render_field(form.difficulty, class_="uk-input") }}, output still formatted vertically and not styled

Result:

enter image description here

Upvotes: 0

Views: 2035

Answers (3)

Mohamed Diaby
Mohamed Diaby

Reputation: 226

Old question, but here is how you do it:

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

you could also do the same for label:

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

Upvotes: 3

Aman
Aman

Reputation: 339

using this way i was able to achieve horizontal layout

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

Upvotes: 1

leovp
leovp

Reputation: 4758

There are no subfields, difficulty is one field with multiple choices.
Render it like any other field and it should work.

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

Upvotes: 1

Related Questions