如何堆疊垂直或水平兩個MultiCheckboxField的平臺字段

Question

我有一個使用小部件的窗體。我想要的是兩個垂直列與複選框並排。

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

例如

• 菜單項|內容
• cbox1 | cbox1'

Answer 1

這是一個水平疊加

這個答案做了所有的工作 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 %}