Flask wtform RadioField label does not render

Question

When using the following form:

class TextForm(Form):
    example = RadioField('Choice 1:', choices=[('A','Option A'),('B','Option B')])
    key = RadioField('Choice 2:', choices=[('1', 'Option 1'), ('2', 'Option 2')])
    submit = SubmitField('Submit')

I am expecting to see:

Choice 1:

Option A
Option B

Choice 2:

Option 1
Option 2

Instead I am getting no labels as follows:

Option A
Option B
Option 1
Option 2

What am I missing?

what does your template look like? – Anzel Dec 30 '14 at 13:04 — Anzel, Dec 30 '14 at 13:04
I'm using {{ wtf.quick_form(form, form_type="basic") }} – zanzu Dec 30 '14 at 13:09 — zanzu, Dec 30 '14 at 13:09

score 5 · Answer 1 · edited Aug 05 '15 at 11:07

5

I just had the same issue.

It might be intended by the author of "quick_form" macro, or more likely he/she missed a line of code to render out the label of RadioField, as the same is done for other types of fields.

To hack it, locate the file "bootstrap/wtf.html", where macro "quick_form" is defined.

add this line:

{{field.label(class="control-label")|safe}}

before the "for" loop:

{% for item in field -%}
  <div class="radio">
    <label>
      {{item|safe}} {{item.label.text|safe}}
    </label>
  </div>
{% endfor %}

Hope this works for you.

edited Aug 05 '15 at 11:07

Joy Rex

608
7
32

answered Aug 04 '15 at 18:47

John Jiang

171
2
5

Thanks for this hack. I had to close the notebook and start again to get it to work. – Aviral Bansal Feb 19 '22 at 13:29

score 5 · Answer 2 · answered Nov 14 '18 at 12:42

5

This is a bug in Flask-Bootstrap, there are two PR opened to fix this (#159 and #166).

Currently, if you use Bootstrap 4, then you can try to use Bootstrap-Flask, a replacement for Flask-Bootstrap.

answered Nov 14 '18 at 12:42

Grey Li

11,664
4
54
64

Anzel · Accepted Answer · 2014-12-30T13:50:28.030

3

I don't use quick_form but if you are going to render the field label, you need to place the {{ field.foo.label }} and {{ field.foo }} for the field label to show, something like this works for me:

<form method="POST" action="/">
    {{ form.hidden_tag() }}
    <h3>{{ form.example.label }}</h3>
    <p>{{ form.example }}</p>
    <h3>{{ form.key.label }}</h3>
    <p>{{ form.key }}</p>
    {{ form.submit }}
</form>

Updated:

Just tried on flask-bootstrap, it should work if rendering the field labels and fields like above (but instead using wtf.form_field, however I'm not seeing anything about quick_form, perhaps a bug? Anyway, here's the working sample:

{% import "bootstrap/wtf.html" as wtf %}

<h3>{{ form.example.label }}</h3>
<p>{{ wtf.form_field(form.example) }}</p>

<h3>{{ form.key.label }}</h3>
<p>{{ wtf.form_field(form.key) }}</p>

{{ form.submit }}

Hope this helps, and output:

enter image description here

edited Dec 30 '14 at 13:50

answered Dec 30 '14 at 13:22

Anzel

19,825
5
51
52

Thanks. This did the job, albeit it requires me to abandon the comforts provided by quick_form. Nevermind though, I needed to move on from quick_form anyway as I now need to split my form into two columns (instead of the default 1 column format used by quick_form) as I want my form to fit in one screen. After a bit of trialling, this doesn't look too daunting, even for a novice like myself. Though I suspect I will encounter a barrier or two as I try to replicate the polished look I was getting with quick_form. – zanzu Dec 30 '14 at 15:09
@zanzu, glad it helps. Well `quick_form` is just a quick wrapper for placing bootstrap classes, so it's handy but nothing really magical. Like myself I never used `quick_form`, just put styling on the form will do just fine. What project are you working on if you don't mind telling? – Anzel Dec 30 '14 at 15:13
I'm having a go at the project I mentioned on last week's post: http://stackoverflow.com/questions/27668595/web-ui-for-python-function. Nothing particularly fancy, but I'm still at the start of the learning curve as this is effectively my first web development project since a basic HTML 1.1 back more than a decade ago now. "Put[ing] styling on the form" sounds easy enough if you're a pro, but I'm not, so quick_form turned out to be very handy initially. I don't usually do web development but I got this fixation that I want to host my python function in the form of a web app. – zanzu Dec 30 '14 at 15:16
@zanzu, OH so it's actually your question I'm answering again lol. small world. If you don't mind my advice, actually learn the html fundamental elements will definitely help you have a solid understanding in future web development. Try not to rely too much on extension/plugins. We from the old days always craft the web from plain html, and you don't need to worry if one day the extension stops the support/maintenance and your web app will be more future proof – Anzel Dec 30 '14 at 15:20
Indeed! Thanks for the advice! I would have given up last week, but thanks to you I'm still at it! :o) – zanzu Dec 30 '14 at 15:23
@zanzu, that's what SO for :) Confidence builds on experience, web development is rewarding, read some books on Python (so your code will be DRY and efficient) and pick a framework like **Flask** and stick on it for 1-2 years (then try another framework, or try to master the one you're good at), you will then be the one to answer someone's else question. Good luck and all the best! – Anzel Dec 30 '14 at 15:29

Flask wtform RadioField label does not render

3 Answers3

Updated:

Linked