I receive goods from the database, fill the template with products, and all these products with the help of:

<div class="row"> {% include 'site/includes/featurette/featurette.html' %} </div>

The problem is that the blocks are of different heights, and they “dance”

I do not get you. Need to do a sample of 3 products, and make a template with three products, and not with one, or can this be beaten using the template itself? enter image description here

Product Template:

 {% for p in product %} <div class="col-sm-6 col-md-4"> <div class="thumbnail"> {% if p.image %} <img src="{{p.image}}" alt="{{p.name}}" style="width: 150%; height: 150%"> {% endif %} {% if p.images %} <img src="{{(p.images[1:-1].split(',')[0])[1:-1]}}" alt="{{p.name}}" style="width: 150%; height: 150%"> {% endif %} <div class="caption"> <h4 style="text-align: center">{{p.name}}</h3> {% if p.size %} {% for i in p.size[1:-1].split("', '") %} <p>{{i}}</p> {% endfor %} {% else %} {% endif %} {% if p.specials %} <div class="table"> <table class="table"> <tbody> {% if p.specials[0] == '[' %} {% for special in p.specials[1:-1].split(',') %} <tr> <td style="border-top: 0px">{{special.replace("'","")}}</td> </tr> {% endfor %} {% else %} {% for special in p.specials[1:-1].split(',') %} <!--p>{#{ special.replace("'", "")[0:6] }#}</p--> {% if special.replace("'", "")[0:6] =='Цвета:' %} {% elif special.replace("'", "")[0:6] == ' backg' %} {% elif special.replace("'", "")[0:6] == ' Цвета'%} {% else %} <tr> <td style="border-top: 0px">{{ special.replace("'", "") }}</td> <tr> {% endif %} {% endfor %} {% endif %} </tbody> </table> </div> {% else %} {% endif %} <p><span class="label label-{{ loop.cycle('success', '', 'danger') }} ">{{ loop.cycle('Скидка','', 'Акция') }}</span></p> <p><a href="#" class="btn btn-primary" role="button" data-toggle="modal" data-target="#product-modal" id="{{p.id}}" onclick="reply_click(this);">Заказать</a> <a href="#" class="btn btn-default" role="button">Получить скидку!</a></p> </div> </div> </div> {% endfor %}
  • And what do you need in the end? To the blocks were the same height? So set them this height + overflow: auto (if the content does not fit into the block, then the block will have a scroll bar). This is an option. There are others. - humster_spb
  • In general, blocks with goods dance, for the reason that no matter how many they are, they are all in one row, and in order to be correct, it is necessary that the goods are grouped in a row, in my case, 3 pieces each. And I do not quite understand, to straighten it out due to changes in the layout and the template, or due to some special selection. - Narnik Gamarnik

1 answer 1

The answer was found here: https://stackoverflow.com/questions/17797921/jinja2-create-new-row-for-every-3-items

In my case, the solution was:

 {% for pr in product|batch(3, '&nbsp;') %} <div class="row"> {% for p in pr if p.id %} <div class="col-sm-6 col-md-4"> <div class="thumbnail"> {% if p.image %} <img src="{{p.image}}" alt="{{p.name}}" style="width: 150%; height: 150%"> {% endif %} {% if p.images %} <img src="{{(p.images[1:-1].split(',')[0])[1:-1]}}" alt="{{p.name}}" style="width: 150%; height: 150%"> {% endif %} <div class="caption"> <h4 style="text-align: center">{{p.name}}</h3> {% if p.size %} {% for i in p.size[1:-1].split("', '") %} <p>{{i}}</p> {% endfor %} {% else %} {% endif %} {% if p.specials %} <div class="table"> <table class="table"> <tbody> {% if p.specials[0] == '[' %} {% for special in p.specials[1:-1].split(',') %} <tr> <td style="border-top: 0px">{{special.replace("'","")}}</td> </tr> {% endfor %} {% else %} {% for special in p.specials[1:-1].split(',') %} <!--p>{#{ special.replace("'", "")[0:6] }#}</p--> {% if special.replace("'", "")[0:6] =='Цвета:' %} {% elif special.replace("'", "")[0:6] == ' backg' %} {% elif special.replace("'", "")[0:6] == ' Цвета'%} {% else %} <tr> <td style="border-top: 0px">{{ special.replace("'", "") }}</td> <tr> {% endif %} {% endfor %} {% endif %} </tbody> </table> </div> {% else %} {% endif %} <p><span class="label label-{{ loop.cycle('success', '', 'danger') }} ">{{ loop.cycle('Скидка','', 'Акция') }}</span></p> <p><a href="#" class="btn btn-primary" role="button" data-toggle="modal" data-target="#product-modal" id="{{p.id}}" onclick="reply_click(this);">Заказать</a> <a href="#" class="btn btn-default" role="button">Получить скидку!</a></p> </div> </div> </div> {% endfor %} </div> {% endfor %}