Wie vertikal oder horizontal zwei MultiCheckboxField wtform Felder stapeln

Question

Ich habe ein Formular, das ein Widget verwendet. was ich will, ist zwei vertikale Spalten nebeneinander mit den Checkboxen.

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

zum Beispiel

• Menüpunkt | Inhalt
• cbox1 | cbox1'

Answer 1

Dies ist eine horizontale Stapelung

Diese Antwort hat die ganze Arbeit 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 %}