Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save zekeriyaguzelsoy/b633ffa9e14d158bd56470d50e92b94d to your computer and use it in GitHub Desktop.
Save zekeriyaguzelsoy/b633ffa9e14d158bd56470d50e92b94d to your computer and use it in GitHub Desktop.
Bs modal ya da tab içerisinde slider kullanımı hakkında
Bu sorun ile karşılaştığımda sorunun benden kaynaklandığını düşünüp tekrar ve tekrar yazarak yanlış olan kısmı çözmeye çalışmıştım ama
nafile idi :( Bu sorunu yaşayan bir çok kişi varmış meğersem.
Yapmaya çalıştığım şey;
Bs nav-tabs kullanarak her bir kategoriye tıkladığımızda aktif olan kategorinin içerisinde slider olacak
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Kategori 1</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Kategori 2</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Kategori 3</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Kategori 1 Detay</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Kategori 2 Detay</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Kategori 3 Detay</div>
</div>
Slider'ı modal ya da tab'a bağladıktan sonra tab değişiklikleri esnasında açılan tab içerisinde div lerin genişlikleri
yanlış hesaplanıyor ve boş bir alan çıkıyor, nedeni ise bs'nin etkin olmayan sekmeleri gizlemesinden dolayı.
Çözüm;
/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: block; /* undo display:none */
height: 0; /* height:0 is also invisible */
overflow: hidden; /* no-overflow */
}
.tab-content > .active, .pill-content > .active {
height: auto; /* let the content decide it */
} /* bootstrap hack end */
Url 1: https://github.com/kenwheeler/slick/issues/619
Url 2: https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/0Aqzs5s_hEY
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment