如何堆叠垂直或水平两个MultiCheckboxField wtform字段 [英] how to stack Vertically or Horizontally two MultiCheckboxField wtform fields

问题描述

我有一个使用小部件的表单。我想要的是与复选框并排放置两个垂直列。
$ b $ pre $ $ $ $ $ $>类MultiCheckboxField（SelectMultipleField）
widget = widgets.ListWidget（prefix_label = False）
option_widget = widgets.CheckboxInput（）
$ b $ class SimpleForm2（Form）：
menu_items = MultiCheckboxField（'Menu Item'，choices = [] ，coerce = int）
contents = MultiCheckboxField（'Content'，choices = []，coerce = int）
submit = SubmitField（'OK'）
/ pre>

例如

• 菜单项目|内容


• cbox1 | cbox1
  
  

  解决方案

  这是一个横向堆叠
  
  

  这个答案做了所有的工作
  

  
  

  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'

  解决方案

  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 %}
  

  这篇关于如何堆叠垂直或水平两个MultiCheckboxField wtform字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！