CODEWITHSUNDEEP
pythondjangodjango-templates
tushortz
tushortz

Reputation: 5015

Display number list in this format django

I am trying to display my parsed result in the django template but at the moment, the code and result I have is as follows and I can't think of something else.

I am struggling to have the next five result on the next line.

My code

{% for number in numbers %}
  {%if not number|divisibleby:"6" %}
    <span>{{ number }}</span>
  {% else %}
    <div>{{ number }}</div>
    <p></p>
  {% endif %}
{% endfor %}

The current result

1   2   3   4   5
6
7   8   9   10  11
12
13  14  15  16  17
18
19  20

My expected result should look similar to

1   2   3   4   5
6   7   8   9   10
11  12  13  14  15
16  17  18  19  20

Upvotes: 1

Views: 615

Answers (2)

Andrey Nelubin
Andrey Nelubin

Reputation: 3294

Do you really need django here? CSS3 has :nth-child pseudo class which does what you want

<span>1</span>....<span>n</span>

css 

span {float:left}
span:nth-child(5n):after {clear:left}

But if you really need another way try this

{%if number|divisibleby:"5" %}
    <span>{{ number }}</span><p></p>
  {% else %}
    <span>{{ number }}</span>
  {% endif %}
{% endfor %}

Upvotes: 2

Wtower
Wtower

Reputation: 19902

This happens because of the <div> element. If you replace it with <span> and leave <p> unchanged it will be ok:

{% for number in numbers %}
    <span>{{ number }}</span>
  {%if number|divisibleby:"6" %}
    <p></p>
  {% endif %}
{% endfor %}

Working fiddle of rendered html.

Alternatively, this is what I would do as I don't like the <p> element of there:

<div>
{% for number in numbers %}
    <span>{{ number }}</span>
  {%if number|divisibleby:"6" %}
    </div><div>
  {% endif %}
{% endfor %}
</div>

Upvotes: 2

Related Questions