CODEWITHSUNDEEP
htmldjangotwitter-bootstrap-3django-templates
Rafael Rodrigo De Souza
Rafael Rodrigo De Souza

Reputation: 160

Django - Cant align html tabs properly

enter image description hereI am trying to show a list of data based on tabs. So far I was able of take the data and show it. The problem is the html part. Some parts of the html should not repeat but they have to be at least once...

[![<body class="bootstrap"  >


      <!--#INCLUDE VIRTUAL="TopNavInclude.asp" -->


      <div class="container">

        <div class="col-md-12"> 

          <div class="panel panel-default panel-fade">

            <div class="panel-heading">

              <span class="panel-title">

                <div class="pull-left">

                <ul class="nav nav-tabs">
       {% block content %}

         {% for s in data_seasons %}
                   {% if s == 1 %}
                  <li class="active"><a href="#tab{{s}}" data-toggle="tab" ><i class="glyphicon glyphicon-send"></i> Temporada {{s}}</a></li>
                  {% else %} 
                  <li><a href="#tab{{s}}" data-toggle="tab" ><i class="glyphicon glyphicon-send"></i> Temporada {{s}}</a></li>

                        {% endif %} 

                       {% endfor %} 

                </ul>

                </div>

                <div class="btn-group pull-right">
                  <div class="btn-group">
                    <a href="#" class="btn  dropdown-toggle" data-toggle="dropdown">
                      <span class="glyphicon glyphicon-cog"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#">Action 1</a></li>
                      <li><a href="#">Action 2</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Another Action</a></li>
                    </ul>
                  </div>
                </div>

                <div class="clearfix"></div>

              </span>

            </div>

            <div class="panel-body">

              <div class="tab-content">



     {% for s in data_seasons %}
 {% for ep in data_ep %}


                  {% if s == ep.tve_season %}  

                       {% if s == 1 %}
                   <div class="tab-pane fade in active" id="tab{{s}}"> 

             <h3>Episodios</h3> 
                 <FORM ACTION="" METHOD="post">
                  <INPUT TYPE="hidden" NAME="FormName" VALUE="PrintLetters">
                  <TABLE class="table table-striped">
                  <THEAD> 

                    <TR><TH>Selecionar</TH><TH style="text-align:left">Nome do Episodio</TH><TH style="text-align:left">Duracao</TH><TH>Data/Horario</TH><TH>Sumario</TH></TR>

                  </THEAD>
                  <TBODY>

                    <TR><TD><INPUT TYPE="checkbox" NAME="EventCode" VALUE=588031></TD><TD>{{ep.tve_name}}</TD><TD>{{ep.tve_runtime}}</TD><TD>{{ep.tve_schedule}}</TD><TD>...</TD></TR>

                  </TBODY>
                  </TABLE>

                </FORM>
                </div>


                                 </div>
                        {% else %} 
                        <div class="tab-pane fade" id="tab{{s}}">sss  </div>
                                      {% endif %} 
                        {% endif %}
{% endfor %}
   {% endfor %}
                </div>


                </div>

              </div>

            </div>

          </div>

        </div>

      </div>




      <footer>
      {% endblock %}][1]][1]

Original template: http://bootsnipp.com/snippets/OMX7O

This the div part should only run once, the for it should be only for the variables:{{s}} and {{ep...}}

{% if s == ep.tve_season %}  

                       {% if s == 1 %}
             <!--This      <div class="tab-pane fade in active" id="tab{{s}}"> 

             <h3>Episodios</h3> 
                 <FORM ACTION="" METHOD="post">
                  <INPUT TYPE="hidden" NAME="FormName" VALUE="PrintLetters">
                  <TABLE class="table table-striped">
                  <THEAD> 

                    <TR><TH>Selecionar</TH><TH style="text-align:left">Nome do Episodio</TH><TH style="text-align:left">Duracao</TH><TH>Data/Horario</TH><TH>Sumario</TH></TR>

                  </THEAD>
                  <TBODY>

                    <TR><TD><INPUT TYPE="checkbox" NAME="EventCode" VALUE=588031></TD><TD>{{ep.tve_name}}</TD><TD>{{ep.tve_runtime}}</TD><TD>{{ep.tve_schedule}}</TD><TD>...</TD></TR>

                  </TBODY>
                  </TABLE>

                </FORM>
                </div> Until this-->


                                 </div>

Upvotes: 0

Views: 243

Answers (1)

AMG
AMG

Reputation: 1646

Look at the variables available in the for loop. There is one called forloop.first which may be a better choice than checking if s = 1. Documentation https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#for

There is a similar discussion at: Django {% if forloop.first %} question

Can you show what your desired output looks like?

Upvotes: 1

Related Questions