Блог

Главная - Вопросы по программированию - Отображение полей WTForms колбы по горизонтали, а не по вертикали

Отображение полей WTForms колбы по горизонтали, а не по вертикали

#python #html #flask #jinja2 #flask-wtforms

Вопрос:

Мое веб-приложение Flask использует WTForms для отображения формы с двумя SelectFields . Форма является пользовательской формой, которая наследуется от form.Form класса WTForms. У меня также есть базовый просмотр, который импортирован из Flask-Admin. Пользовательский ввод состоит из нескольких SelectField s (от wtforms.fields ), и все они расположены вертикально друг на друге. Есть ли способ отобразить поля выбора горизонтально , чтобы field1 они были слева field2 , а не сверху field2 ? Спасибо.

Текущий код (отредактирован для ясности):

 # form.py

from flask_admin import BaseView
from wtforms import form
from wtforms.fields import SelectField

class FormA(form.Form):
    field1 = SelectField(choices=[('A', 'Choice A'), ('B', 'Choice B')])
    field2 = SelectField(choices=[('C', 'Choice C'), ('D', 'Choice D')])
   
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

class ViewA(BaseView):
    @expose('/', methods=('GET',))
    def index(self):
        form = FormA()
        return self.render('admin/form.html', form=form)

Здесь, в form.html файле, я импортирую flask-admin и создаю форму:

 <!--form.html-->

{% import "admin/lib.html" as lib with context %}

{% block head_tail %}
<!--other stuff-->
{% endblock %}

{% block subheader %} {
<form method="GET">
    {{ lib.render_form_fields(form)}}
</form>
{% endblock %}

{% block body %}
<!--other stuff-->
{% endblock %}


{% block tail %}
<!--other stuff-->
{% endblock %}

Прямо сейчас field1 и field2 расположены вертикально, но я бы хотел, чтобы они отображались бок о бок. Есть ли способ сделать это? Спасибо.

Ответ №1:

Вы можете настроить форму с помощью css и установить display: flex .

Вы могли бы дать своей форме удостоверение личности:

 <form id="myform" method="GET">
    {{ lib.render_form_fields(form)}}
</form>

и нацеливайте его с помощью css вот так:

 #myform {
    display: flex;
}

В качестве альтернативы, если вы не хотите, чтобы для всей формы было display установлено flex значение, вы можете окружить render_form_fields div и установить display: flex на этот div.

Метки: ,