CODEWITHSUNDEEP
htmldjangocssdjango-templates
Victor Yee
Victor Yee

Reputation: 151

html behaving differently after adding django template tags

My nav pills appears in a single row. But once I add django template tags to it, the pills stacks on top of each another.

How do I fix it so that the pills appear all in one row?

Without django tags

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

With django tags

{% for menu in menus %}
<ul class="nav nav-pills">
    {% if menu.mealtype == 'Breakfast' %}
        <li role="presentation" class="active"><a href="#">Home</a></li>
    {% endif %}
    {% if menu.mealtype == 'Lunch' %}
        <li role="presentation"><a href="#">Profile</a></li>
    {% endif %}
</ul>
{% endfor %}

Upvotes: 1

Views: 33

Answers (1)

Lochemage
Lochemage

Reputation: 3974

Your problem is that your for loop {% for menu in menus %} repeats the <ul> tag as well. You are making a separate list per entry.

Try moving your for loop inside the <ul> tags.

<ul class="nav nav-pills">
{% for menu in menus %}
    {% if menu.mealtype == 'Breakfast' %}
        <li role="presentation" class="active"><a href="#">Home</a></li>
    {% endif %}
    {% if menu.mealtype == 'Lunch' %}
        <li role="presentation"><a href="#">Profile</a></li>
    {% endif %}
{% endfor %}
</ul>

Upvotes: 1

Related Questions