CSS для фляжки wtforms

Question

У меня есть следующий код для формы, который у меня есть в приложении Flask с использованием Wtforms. Я использую FieldList для использования двух полей для одной части.

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

Шаблон использует 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 %} 

В настоящее время формы визуализации в сплющенные и перекрытием образом, как так:

Как я могу изменить код так, что отформатированный в одной строке, как показано ниже? Это скриншот @Niklas в Стокгольме form from his question.

Спасибо!

Answer 1

Вопрос заключается в том, что {{ wtf.quick_form(form) }} звонит wtf.form_field() на вашем FieldListadditional в A вместо вызова его на подполой additional «s. Из-за этого я не думаю, что вы сможете использовать 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"> 
    <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 %} 

Вы можете прочитать больше о wtf.form_field() на documentation сайте Колба-Bootstrap.

Answer 2

Так как ваша форма класс A звонит класс Additional как FormField и только добавление submit в поле, я добавил submit кнопки на Additional самой формы, а затем назвал его в представлении.

В шаблоне используйте

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

Он выводит страницу так:

form_type аргумент добавляет .form-inline к атрибуту класса.

Это просто взломать, конечно, ваша форма будет иметь больше входных данных, чем это, для этого вы сами будете писать весь шаблон формы.