nested tabs bootstrap3 have bug with slider inside parent tab

hello i use bootstrap 3 tabs. inside nav-tabs i have 3 tabe-pane first tab only have text, second tab have a slider, and third have nested tab.

my slider nested tab didnt work in first tab. like the contain is gone. but if i go to second tabe-pane and then back to first tab-pane (in nested tab), the contain suddently show up

my js is like this

  $(document).ready(function() { 
        $('.review-company').slick({
          centerMode: true,
          centerPadding: '60px',
          slidesToShow: 3,
          responsive: [
            {
              breakpoint: 768,
              settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 3
              }
            },
            {
              breakpoint: 480,
              settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 1
              }
            }
          ]
        });
    });

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
     $('.review-company').slick('setPosition');
    });

heres mywork please help

https://jsfiddle.net/cgw57v1L/45/

Answers


You just need to add the "active" class to the div id="Mfavourite" containing the text, as well as the li item - full html as below:

<div id="tabs">
                <!-- Nav tabs -->
                <ul id="first-tab" class="nav nav-tabs responsive-tabs capital bold text-center m-b-25">
                  <li class="active "><a href="#portfolio" role="tab" data-toggle="tab">portfolio</a></li>
                  <li class=""><a href="#recomendation" role="tab" data-toggle="tab">recomendation</a></li>
                  <li class=""><a href="#statistic" role="tab" data-toggle="tab">statistic</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                  <div class="tab-pane fade in active" id="portfolio">
                    <p>lorem</p>
                  </div><!-- tab-pane#portfolio -->
                  <div class="tab-pane fade in" id="recomendation">
                    <h4 class="bold capital">reviews <span style="font-weight: normal;color: #c2c2c2;">(5)</span></h4>
                    <p class="capital bold">Review from older company</p>
                      <div class="review-company">
                        <div><img src="http://placehold.it/350x150"></div>
                            <div><img src="http://placehold.it/350x150"></div>
                            <div><img src="http://placehold.it/350x150"></div>
                            <div><img src="http://placehold.it/350x150"></div>
                            <div><img src="http://placehold.it/350x150"></div>
                            <div><img src="http://placehold.it/350x150"></div>
                      </div><!-- Review-company -->

                  </div><!-- tab-pane#recomendation -->
                  <div class="tab-pane fade in" id="statistic">
                    <h4 class="bold uppercase">portfolio <span style="font-weight: normal;color: #c2c2c2;">(12)</span></h4>    
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo animi in ab sapiente esse possimus cum, sed repellendus ipsa mollitia. Magni eos eligendi animi dolore ipsam totam ipsa. Illo, inventore.</p> 


                    <hr>
                    <div id="second-tab">
                      <div class="top-portfolio">
                        <h4 class="title capital">lofdm</h4>
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs responsive-tabs capital bold text-center m-b-25">
                          <li class="active"><a href="#Mfavorite" role="tab" data-toggle="tab">Most Favorite</a></li>
                          <li class=""><a href="#Mview" role="tab" data-toggle="tab">Most View</a></li>
                          <li class=""><a href="#Mcomment" role="tab" data-toggle="tab">Most Comment</a></li>
                        </ul>
                        <div class="tab-content">


<!--HERE-->           <div class="tab-pane fade in active" id="Mfavorite">

      <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis dolor illum numquam error deleniti at! Culpa numquam, maiores delectus adipisci, animi cumque. Nobis dignissimos nesciunt distinctio, earum reprehenderit quibusdam omnis. </p>
                          </div>
                          <div class="tab-pane fade in" id="Mview">
                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non suscipit reprehenderit atque deleniti architecto illum, reiciendis? Voluptatibus nisi vitae nostrum, delectus alias aspernatur, nam doloribus doloremque non facilis aliquam perspiciatis!</p>
                          </div>
                          <div class="tab-pane fade  in" id="Mcomment">
                              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus culpa sunt sed temporibus molestiae, dolorem aliquam quasi consectetur eius voluptates.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div><!-- statistic -->
                </div><!-- tab-content -->  
              </div><!-- tabs -->

Need Your Help

JPanel gets paintComponent gets called when child is entered

java swing nimbus-ios

Some previous entries here address paintComponent() being called repeatedly, but the answers hinged on paintComponent itself calling repaint().

decompiler for VSTO file?

visual-studio-2010 vsto outlook-addin

I lost the code I developed for one Outlook addin and the only file I have is the VSTO. Any software to decompile?