how to stack Vertically or Horizontally two MultiCheckboxField wtform fields

问题

i have a form that uses a widget. what i want is two vertical columns side by side with the checkboxes.

class MultiCheckboxField(SelectMultipleField):
    widget = widgets.ListWidget(prefix_label=False)
    option_widget = widgets.CheckboxInput()

class SimpleForm2(Form):
    menu_items = MultiCheckboxField('Menu Item', choices=[], coerce=int)
    contents = MultiCheckboxField('Content', choices=[], coerce=int)
    submit = SubmitField('OK')

for example

• Menu Item | Content
• cbox1 | cbox1'

回答1:

This is a Horizontal stacking

This answer did all the work css stacking

from flask_wtf import Form

class SimpleForm2(Form):
    menu_items = MultiCheckboxField('Menu Item', choices=[], coerce=int)
    # contents = MultiCheckboxField('Content', choices=[], coerce=int)
    # submit = SubmitField('OK')


class SimpleForm3(Form):
    # menu_items = MultiCheckboxField('Menu Item', choices=[], coerce=int)
    contents = MultiCheckboxField('Content', choices=[], coerce=int)
    # submit = SubmitField('OK')

@manage.route('/test', methods=['GET', 'POST', 'PUT', 'DELETE'])
@login_required
def test(menu_item_id=None):
    form = SimpleForm2()
    form1 = SimpleForm3()
    form1.contents.choices = [(x.id, x.name) for x in MenuItemContent.query.filter_by(store_id=current_user.id).all()]
    form.menu_items.choices = [(x.id, x.product_name) for x in MenuItem.query.filter_by(store_id=current_user.id).all()]
    info = []
    if form.validate_on_submit() and form1.validate_on_submit():
        menu_item = form.data['menu_items']
        contents = form1.data['contents']
        for mid in menu_item:
            info = []
            for c in contents:
                info.append({"menu_content_id": c,
                             "default": 0,
                             "cost": 0})
            MenuManager(db.session).create_menu_with_content_relationship(store_id=current_user.id,
                                                                          menu_id=mid,
                                                                          menu_content_info=info)

    return render_template('manage/form_test.html', form=form, form1=form1)

form_test.html

{% include "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% from "macros.html" import render_field %}

{% block page_content %}


{% macro render_form44(form, action_url='', action_text='Submit', class_='', btn_class='btn btn-default') -%}

<!-- <form method="POST" action="{{ action_url }}" role="form" class="{{ class_ }}"> -->
    {{ form.hidden_tag() if form.hidden_tag }}
    {% if caller %}
      {{ caller() }}
    {% else %}
      {% for f in form %}
        {% if f.type == 'BooleanField' %}
          {{ render_checkbox_field(f) }}
        {% elif f.type == 'RadioField' %}
         {{ render_radio_field(f) }}
        {% else %}
          {{ render_field(f) }}
        {% endif %}
      {% endfor %}
    {% endif %}
<!--      <button type="submit">OK</button>
</form> -->
{%- endmacro %}


<style type="text/css">

fieldset.group  {
  margin: 0;
  padding: 0;
  margin-bottom: 1.25em;
  padding: .125em;
}

fieldset.group legend {
  margin: 0;
  padding: 0;
  font-weight: bold;
  margin-left: 20px;
  font-size: 100%;
  color: black;
}


ul.checkbox  {
  margin: 0;
  padding: 0;
  margin-left: 20px;
  list-style: none;
}

ul.checkbox li input {
  margin-right: .25em;
}

ul.checkbox li {
  border: 1px transparent solid;
  display:inline-block;
  width:12em;
}

ul.checkbox li label {
  margin-left: ;
}
ul.checkbox li:hover,
ul.checkbox li.focus  {
  background-color: lightyellow;
  border: 1px gray solid;
  width: 12em;
}

.checkbox {
    -webkit-column-count: 6; /* Chrome, Safari, Opera */
    -moz-column-count: 6; /* Firefox */
    column-count: 6;
}

</style>
<form method="POST" role="form">

<fieldset class="group">
<legend>Pick Menu Items</legend>
<ul class="checkbox">
{{ render_form44(form) }}
</ul>
</fieldset>

<fieldset class="group">
<legend>Pick Contents</legend>
<ul class="checkbox">
{{ render_form44(form1) }}
</ul>
</fieldset>

    <button type="submit">OK</button>
</form>




{% endblock %}

来源：https://stackoverflow.com/questions/45178766/how-to-stack-vertically-or-horizontally-two-multicheckboxfield-wtform-fields