0

I have a dictionary of items. I'm trying to display them on the page using the Bootstrap Card Deck and Flash

But when i try to do it. I get the following result. enter image description here

This is the code on my HTML:

{% extends "base.html" %} {% block title %}Specialized | Store{% endblock %} {% block content %}
<div class="container">

    <div class="card-deck">

        {% for message in get_flashed_messages()%}
        <div class="card">
        <img src="/static/framesThumb/framesets/1.jpg" class="card-img-top" alt="...">
            <div class="card-body">
                <h5>{{ message }}</h5>
            </div>
        </div>

        {% endfor %}

    </div>

</div>
{% endblock %}

And this is my code in Python

@app.route('/store')
def store():

    itemKeys = list( test["products"].keys() )

    for key in itemKeys:
        subCatLens = len(test["products"][key])
        for i in range(subCatLens):
            item = test["products"][key][i]

            payload = item[1]
            flash(payload)


    return render_template('store.html')

However, If I remove the class from <div class="card">, I get a better result yet, not what I expect, it's as if the Bootstrap isn't working when I flash messages.

I tried using Markup as well but it isn't any better or different.

Also, I've checked that Bootstrap Is loaded. And I don't have any custom CSS code. It's currently all using Bootstrap 4.3.1

This is my expected Results (This is using bootstrap card deck) enter image description here

And this is a sample of my Dictionary i'm pulling data from. Frameset/Saddle/Wheels/Helmet : [ [id, title, price, shortdec, longdec, thumbnail, longpic1, longpic2, longpic3, quantity] ]

Any ideas?

SunAwtCanvas
  • 1,261
  • 1
  • 13
  • 38
  • Kindly add the expected results (hand typed HTML sample of what you wish to see) and a sample data of the `test` dictionary to better understand the issue and answer the question. – Arunmozhi Nov 20 '19 at 04:36
  • @Arunmozhi Thanks :) I updated it :) Do note on the expected results all the images are different. On my problem code, I only use 1 image for now for testing. – SunAwtCanvas Nov 20 '19 at 04:42
  • Is this the same problem? https://stackoverflow.com/questions/36430816/bootstrap-4-card-deck-with-number-of-columns-based-on-viewport – VPfB Nov 20 '19 at 05:40
  • @VPfB Nope :( My problem only exist when I use `Flash` to list out all of the products one by one. My previous method which worked uses passing variables in the `render_template()`. But it's very tedious – SunAwtCanvas Nov 20 '19 at 06:17

0 Answers0