CODEWITHSUNDEEP
pythonflaskwtforms
sbd
sbd

Reputation: 27

Does wtforms Integer Field force a new line when displayed on webpage?

I am using wtforms as part of a Python + Flask project. There are some cases where I want multiple fields of a form to appear on the same line on the webpage. With SelectField, this works as expected. However, when I use IntegerField, it seems to automatically create a new line after the field is displayed, and I get have more than one on a line.

The Form:

class PremiumMandatory(FlaskForm):
    match_dol = IntegerField('Dollar')
    match_per = IntegerField('Percent')

The .html

{{form.match_dol.label}}
${{form.match_dol(size=3)}}

&nbsp
{{form.match_per(size=3)}}%
{% for error in form.match_per.errors %}

Using the above, the two fields also appear on different lines on the webpage. Ho do I keep then on the same line?

Upvotes: 0

Views: 325

Answers (1)

Tedpac
Tedpac

Reputation: 1177

This is an entirely HTML/CSS problem. There are many ways to put multiple fields of a form on the same line, for example, you could use Bootstrap's grid system, which is very easy to use.

Another simple way is:

<form>
    <div style="display: table;">
        <div style="display: table-row;">
            <div style="display: table-cell;">
                {{ form.match_dol.label }}
                {{ form.match_dol(size=3) }}
            </div>
            <div style="display: table-cell;">
                {{ form.match_per.label }}
                {{ form.match_per(size=3) }}
            </div>
        </div>
        <div style="display: table-row;">
            ...
        </div>
    </div>
</form>

Upvotes: 0

Related Questions