html behaving differently after adding django template tags

Question

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 %}

Lochemage · Accepted Answer · 2015-08-01 05:59:04Z

1

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>

answered Aug 1, 2015 at 5:59

Lochemage

3,97413 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Victor Yee Over a year ago

Thanks for the quick answer. Works perfectly

Collectives™ on Stack Overflow

html behaving differently after adding django template tags

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related