How to stack vertically or horizontally two WTform MultiCheckboxField fields

Question

I have a form that uses a widget. what i want is two vertical columns next to 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') 

eg

• Menu item | Content
• cbox1 | cbox1

Answer 1

This is horizontal laying

This answer did all the work of 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 %}