WTF Bootstrap Quick Form how to render HTML

Question

Hi there I have to use one unique HTML page to display a few fields that will be populated with some data retrieved from a csv file. I want to use the WTF quick form to pass all the fields together to the HTML page, since I won't know the field names, because they can be retrieved from different csv files(they will be equivalent to the column header of the csv). The only problem is that I want them to be displayed in two columns (div), so half fields in one colums, half in the other, while quick form will show them in a single vertical list. How can I sort this out in the easiest way? any attribute to add to the quick form for the layout?

I have tried the following using wtf.form_field, but in this way I must know the name of each field, and I will have to create one HTML page for each CSV file, while I want to have 1 HTML page with quick form, but I can't have the fields displayed in two columns that way.

<div class="row">

    <div class="col-md-6">

        {{ wtf.form_field(form.COD_SPORTELLO) }}
        {{ wtf.form_field(form.QU_CAP) }}
        {{ wtf.form_field(form.QU_CAP_INTER) }}
        {{ wtf.form_field(form.CAUSALE) }}
        {{ wtf.form_field(form.ONERI_RATE_VAL) }}
        {{ wtf.form_field(form.FLAG_ANTIRIC) }}
        {{ wtf.form_field(form.FLAG_VIG) }}

    </div>

    <div class="col-md-6">
        {{ wtf.form_field(form.COD_RAPPORTO) }}
        {{ wtf.form_field(form.QU_CAP_VALUTA) }}
        {{ wtf.form_field(form.DATA_SCADENZA) }}
        {{ wtf.form_field(form.ONERI_RATE) }}
        {{ wtf.form_field(form.QU_INTER_VALUTA) }}
        {{ wtf.form_field(form.FLAG_AR) }}

    </div>

</div>

I think it's a bit tricky because even if I pass some parameter to the quick form like horizontal_columns for instance ( Must be a 3-tuple of column-type, left-column-size, right-column-size), it will create a second column, but it will display the fields only one column still, so somehow I have to tell him that I want half of the fields on one column and half on the other column (div). I can't use form_field and list each fileld name cause I won't know the field names.

score 0 · Answer 1 · answered Apr 01 '19 at 13:08

0

The fields can be assigned a class directly from the template. If you know what bootstrap classes you need then you call it with the field with a keyword argument class

As explained in this answer

Add a css class to a field in wtform

answered Apr 01 '19 at 13:08

Swift

1,663
1
10
21

I know but to create 2 columns with bootstrap classes you need to put each one inside a div like this
{{ wtf.quick_form(form) }}

{{ wtf.quick_form(form) }}
And if I put two times the quick form it's gonna repeat the fields two times, because quick form passes all values from the class together. – mar Apr 02 '19 at 07:17
While I need half of the fields on the right column, and the other half on the left column. I can't write the single fields because I won't know the fields name that will be passed to the template and how many – mar Apr 02 '19 at 07:22

WTF Bootstrap Quick Form how to render HTML

1 Answers1