tabs overlapping in foreach [closed]

Question

tabs overlapping in foreach [closed]

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

I need the foreach to work correctly: For us to have no doubt here is the normal code:

<!-- Tab v2 -->
    <div class="tabs alternative">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#sample-2a" data-toggle="tab">Sample Heading 1</a>
            </li>
            <li>
                <a href="#sample-2b" data-toggle="tab">Sample Heading 2</a>
            </li>
            <li>
                <a href="#sample-2c" data-toggle="tab">Sample Heading 3</a>
            </li>
            <li>
                <a href="#sample-2d" data-toggle="tab">Sample Heading 4</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade in active" id="sample-2a">
                <div class="row">
                    <div class="col-md-5">
                        <img src="assets/img/fillers/filler1.jpg" alt="filler image">
                    </div>
                    <div class="col-md-7">
                        <h3 class="no-margin no-padding">Humanitatis Per Seacula</h3>
                        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,
                            qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothicas.</p>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade in" id="sample-2b">
                <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui
                    sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem
                    modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
            </div>
            <div class="tab-pane fade in" id="sample-2c">
                <div class="row">
                    <div class="col-md-5">
                        <img src="assets/img/fillers/filler3.jpg" alt="filler image">
                    </div>
                    <div class="col-md-7">
                        <h3 class="no-margin no-padding">Mirum Est Notare</h3>
                        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,
                            qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothicas.</p>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade in" id="sample-2d">
                <p>Vivamus imperdiet condimentum diam, eget placerat felis consectetur id. Donec eget orci metus, Vivamus imperdiet condimentum diam, eget placerat felis consectetur id. Donec eget orci metus, ac adipiscing nunc. Pellentesque
                    fermentum, ante ac interdum ullamcorper. Donec eget orci metus, ac adipiscing nunc. Pellentesque fermentum, consectetur id.</p>
                <ul>
                    <li>Donec eget orci metus</li>
                    <li>Ante ac interdum ullamcorper</li>
                    <li>Vivamus imperdiet condimentum</li>
                    <li>Pellentesque fermentum</li>
                </ul>
            </div>
        </div>
    </div>
<!-- End Tab v2 -->

This code generates this effect:

However,whenIdotheloop,itoverlapsthetabs.

HowdoIdo:

<!--Tabv2--><divclass="tabs alternative">
        <?php $x=0; foreach($programacao_mes as $value):;?>
        <ul class="nav nav-tabs">

            <li <?php echo ($value->programacao_id == 1) ? "class='active'" : ""   ?>>
                <a href="#sample-<?php echo $x?>" data-toggle="tab"><?php echo $value->programacao_titulo;?></a>
            </li>

        </ul>
        <div class="tab-content">
            <div <?php echo ($value->programacao_id == 1) ? "class='tab-pane fade in active' id='sample-$x' " : "class='tab-pane fade in' " ?> >
                <div class="row">
                    <div class="col-md-5">
                        <img src="assets/img/fillers/filler1.jpg" alt="filler image">
                    </div>
                    <div class="col-md-7">
                        <h3 class="no-margin no-padding"><?php echo $value->programacao_titulo;?></h3>
                        <p><?php echo $value->programacao_post;?></p>
                    </div>
                </div>
            </div>

        </div>
         <?php $x++; endforeach;?>
    </div>

<!-- End Tab v2 -->

That generates this totally wrong effect.

What am I probably doing wrong?

php codeigniter

asked by anonymous 28.10.2016 / 04:30

2 answers

2

You should probably be applying foreach to the wrong place.

Note that the <UL> tag means "unorder list", that is, unordered list marking. By putting this tag inside the foreach you are replicating the lists, each with a single item.

The <LI> tag means "list item" and only it should appear within foreach , thus creating a single list (UL) with as many items as needed.

28.10.2016 / 07:34

REST API Versioning. Is there a way to do it and what would be the best option? Working with Seed Method + FK

score 2 · Accepted Answer

If you do it this way, it will work:

<!-- Tab v2 -->
<div class="tabs alternative">
    <ul class="nav nav-tabs">
        <li class="active">
            <?php $x=0; foreach($programacao_mes as $value){ ?>
            <a href="#sample-<?php echo $x; ?>" data-toggle="tab">Sample Heading <?php echo $x; ?></a>
            <?php $x++; } ?>
        </li>
    </ul>
    <div class="tab-content">
        <?php $b=0; foreach($programacao_mes as $value){ ?>
        <div class="tab-pane fade in active" id="sample-<?php echo $b; ?>">
            <div class="row">
                <div class="col-md-5">
                    <img src="assets/img/fillers/filler1.jpg" alt="filler image">
                </div>
                <div class="col-md-7">
                    <h3 class="no-margin no-padding">Humanitatis Per Seacula</h3>
                    <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,
                        qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothicas.</p>
                </div>
            </div>
        </div>
        <?php $b++; ?>
    </div>
</div>
<!-- End Tab v2 -->

I put $ x, $ b, to count how many records are in your foreach (), and then identify where each content should be.

And note that they are two foreach (), the first should bring the categories in which each content is, and the second, their respective contents, based on the selected categories.