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.ListWidg

Solution 1:

This is a Horizontal stacking

This answer did all the work css stacking

from flask_wtf import Form

classSimpleForm2(Form):
    menu_items = MultiCheckboxField('Menu Item', choices=[], coerce=int)
    # contents = MultiCheckboxField('Content', choices=[], coerce=int)# submit = SubmitField('OK')classSimpleForm3(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_requireddeftest(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 %}


<styletype="text/css">fieldset.group  {
  margin: 0;
  padding: 0;
  margin-bottom: 1.25em;
  padding: .125em;
}

fieldset.grouplegend {
  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.checkboxliinput {
  margin-right: .25em;
}

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

ul.checkboxlilabel {
  margin-left: ;
}
ul.checkboxli:hover,
ul.checkboxli.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><formmethod="POST"role="form"><fieldsetclass="group"><legend>Pick Menu Items</legend><ulclass="checkbox">
{{ render_form44(form) }}
</ul></fieldset><fieldsetclass="group"><legend>Pick Contents</legend><ulclass="checkbox">
{{ render_form44(form1) }}
</ul></fieldset><buttontype="submit">OK</button></form>




{% endblock %}