CSS for Flask wtforms

Question

I have a the following code for a Form that I have in my Flask application using Wtforms. I use FieldList to use two fields for one part.

class A(Form)
        additional = FieldList(FormField(Additional), 'Additional', min_entries=1)
        submit = SubmitField('Submit')

class Additional(Form):
        choices = [('Funding Mechanism', 'Funding Mechanism'), ('Study Section Name', 'Study Section Name')]
        critera = SelectField('Additional Criteria', choices=choices)
        input = StringField()

The template uses wtf.quick_form:

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

{% block title %}Grants - Find Grant{% endblock %}

{% block page_content %}
<div class="page-header">
    <h1>Specify</h1>
</div>
<div class="col-md-4">
    {{ wtf.quick_form(form) }}
</div>
{% endblock %}

Currently the forms render in a squished and overlapping way like so:

How can I change the code so that it is formated in one line like below? It is a screenshot of @Niklas in Stockholm 's form from his question.

Thank you!

Are you returning form A or Additional? I tried using the most basic Jinja template with Flask-Bootstrap and it seemed to work for me. Perhaps something is wrong with your CSS. — Connie
– Connie, Commented Aug 12, 2015 at 21:03

v1k45 · Accepted Answer · 2015-08-13 18:40:05Z

3

Since your form class A is calling class Additional as a FormField and only adding submit to the field, i added the submit button the Additional form itself and then called it in the view.

In the template, use

{{ wtf.quick_form(form, form_type="inline") }}

It outputs the page like this:

The form_type argument adds the .form-inline to the class attribute.

This is just a hack, surely your form will have more inputs than this, for that, you'll be writing the whole form template yourself.

answered Aug 13, 2015 at 18:40

v1k45

8,2502 gold badges34 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Connie · Accepted Answer · 2015-08-13 17:41:02Z

The issue is that {{ wtf.quick_form(form) }} is calling wtf.form_field() on your FieldList additional in A instead of calling it on additional's subfields. Because of this, I don't think you will be able to use wtf.quick_form() on your particular form.

Instead, try templating your form like this:

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

{% block title %}Grants - Find Grant{% endblock %}

{% block page_content %}
<div class="page-header">
    <h1>Specify</h1>
</div>
<div class="col-md-4">
    <form class="form form-horizontal" method="post" role="form">
        {{ form.hidden_tag() }}
        {{ wtf.form_errors(form, hiddens="only") }}

        {% for subfield in form.additional %}
            {{ wtf.form_field(subfield) }}
        {% endfor %}
        {{ wtf.form_field(form.submit) }}
    </form>
</div>
{% endblock %}

You can read more about wtf.form_field() on the Flask-Bootstrap documentation site.

Collectives™ on Stack Overflow

CSS for Flask wtforms

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related