Not working on Bootstrap's modal or tab

[ghost]

When I tried this inside a tab or a modal on Twitter Bootstrap, the carousel doesn't appear. As if it seem like it has a zero height. When I click on next photo using the bullets or wait for awhile to auto scroll, the photo appear.

Here is a JS Fillde of the problem on Modal - http://jsfiddle.net/vanduzled/s18ce5gr/

Anyone can help?

thanks!

[kenwheeler]

You need to call $('.your-selector)[0].slick.setPosition() when it appears

[ghost]

The resize() seems to work for me too from this issue 187 but it doesn't work with multiple sliders/modals. I also tried t he .slick.setPosition() and it's the same thing. It seems like only one of the modal window works and it's the first modal that you click.

I have this code:

  $('.modal').on('shown.bs.modal', function (e) {
    $('.carousel').resize();
  })

and Fiddle - http://jsfiddle.net/vanduzled/nv446jgm/2/

[tpiechota]

I had the same problem, not with modals but with tabs though, and came accross this solution on google groups you might find useful. (https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/0Aqzs5s_hEY)

"The Cause:

... the problem is caused by the fact that Bootstrap uses display: none to hide inactive tabs:

.tab-content > .tab-pane, .pill-content > .pill-pane {
    display: none;      /* this is the problem */
}

This causes Highcharts not able to get the expected width to create the chart. This would happen to other tools using the same approach to have DOM elements hidden or disappeared.

A Pure CSS Solution:

Alternatively, we can achieve the hidden effect using height: 0; overflow-y: hidden, this way the hidden tab panes are still in place and having valid width:

/* 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-y: hidden; /* no-overflow                */
}
.tab-content > .active,
.pill-content > .active {
    height: auto;       /* let the content decide it  */
} /* bootstrap hack end */

This solution is seamless, so you no longer have to worry whether the chart is inside a tab-pane or not. And it's efficient as it fixes the width issue in the first place, thus there's no need to fix the width issue afterward via resize/redraw/reflow using javascript code.

Demo:

Before:
http://jsfiddle.net/nfv8d/2/

vs

After:
http://jsfiddle.net/nfv8d/4/"

Worked like a charm in my case.

[vanboom]

thanks tpiechota - your suggestion is brilliant! In my case I had slick sliders embedded in a Foundation 5 accordion, and your method of using the height to control the visibility worked like a CHAMP! Thank you!

[nettio]

@tpiechota - what a beautiful solution. I'd spent hours battling with JS fixes and hacks, and your CSS solution is awesome. Thank you, thank you.

[BradRyan]

Yeah resize() on shown works, but it's causing a considerably laggy feel when the slider jumps into view on modals.

[Binternet]

@tpiechota great solution, thanks!

[pablohenriqueop]

@tpiechota You saved my day!

[dieppon]

I would add overflow-y: visible; if your arrows are outside of the slider they won't show up with this hack.

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: block;     /* undo display:none          */
  height: 0;          /* height:0 is also invisible */
  overflow-y: hidden; /* no-overflow                */
}
.tab-content > .active,
.pill-content > .active {
  height: auto;       /* let the content decide it  */
  overflow-y: visible;
} /* bootstrap hack end */```

[markbell2410]

Bootstrap fires an event when the modal is 'shown'.

$('#somemodal').on('shown.bs.modal', function (e) {
$(someelement).slick('setPosition');
});

Which enables you to hook into the flow and re-render slick.