Bootstrap dropdown menu with WTF and Flask

Question

I'm an amateur building a Flask/WTF/Jinja2 (using the Bootstrap) website, and I have not yet implemented a dropdown button. Unfortunately, I'm really struggling with the Bootstrap / Jinja2 elements (i can get my data to the jinja2, but can't get anything to render properly). If it helps as a reference, I'm emerging from the Corey Schafer school of Flask on Youtube.

Here is my WTF class statement:

class SegmentForm(FlaskForm): segmentID = SelectField(label='Choose a Segment', coerce=int, validators=[InputRequired])

Here is my route (Flask) statement:

@decks.route('/decks/segments', methods=['GET']) @login_required def segments(): form = SegmentForm() pathname = os.path.abspath(os.path.dirname(__file__)) df = pd.read_csv(pathname + '/upload_data/segment_summary.csv', index_col=None) form.segmentID.choices = df.seg_name

Where I am struggling is to get the Bootstrap / Jinja2 sorted out:

 <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id={{form.segmentID.label}}> {{ form.segmentID.label }} </button> <div class="dropdown-menu" aria-labelledby={{form.segmentID.label}}> {% for segment in form.segmentID.choices %} <option value="{{ segment }}">{{ segment }}</option> {% endfor %} </div> </div>

What version of Bootstrap ? Your Jinja for loop is outputing option elements but the Bootstrap 4 docs use regular anchor elements with an appropriate class. — pjcunningham
– pjcunningham, Commented Sep 2, 2020 at 16:24

C. Cooney · Accepted Answer · 2020-09-04 02:09:24Z

form.py:

from flask_wtf import FlaskForm from wtforms import SubmitField, SelectField, SelectMultipleField, widgets from wtforms.validators import DataRequired, NumberRange, InputRequired, Length class MultiCheckboxField(SelectMultipleField): widget = widgets.ListWidget(prefix_label=False) option_widget = widgets.CheckboxInput() class FindSegmentForm(FlaskForm): submit = SubmitField('Identify Segment for Deck') clear = SubmitField('Reset to Blanks') cards = MultiCheckboxField('Select Cards for Deck', coerce=int)

From routes.py:

card_list = list(zip(df.card_id.to_list(), df.card_names.to_list())) form.cards.choices = card_list

From display.html:

{% for cards in form.cards %} <div class="form-check"> {{ cards(class="form-check-input") }} {{ cards.label(class="form-check-label") }} </div> {% endfor %}

My thanks to ectrimble for his original solution. (https://gist.github.com/ectrimble20/468156763a1389a913089782ab0f272e)

Collectives™ on Stack Overflow

Bootstrap dropdown menu with WTF and Flask

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related