Foundation 5 Orbit Slider inside Reveal Modal has no Height

Question

Here is a jsfiddle demonstrating the following issue.

I'm using Foundation 5 framework and trying to include an Orbit Slider inside of a Reveal Modal, however for some reason the slider is not given an appropriate height.

<-- Button to Reveal Modal -->
<a href="#" data-reveal-id="myModal" data-reveal class="button radius">Click For Modal</a>

<!-- Modal Popup that is revealed -->
<div id="myModal" class="reveal-modal" data-reveal>
    <ul data-orbit>
        <li><img src="http://placekitten.com/400/300" /></li>
        <li><img src="http://placekitten.com/400/300" /></li>
        <li><img src="http://placekitten.com/400/300" /></li>
    </ul>
</div>

Note that if you resize your browser window with the modal open, it automatically corrects itself to the appropriate height. This issue existed in previous versions of Foundation, so hacky fixes popped up like this:

$('.reveal-modal').on('opened', function(){
    $(this).find('[data-orbit]').css('height','');  
    $(window).trigger('resize.fndtn.orbit');
});

However this fix no longer works in the newest version of Foundation. Is there any way to get it working?

Note that I don't want to simply assign a min-height css attribute as the content in my slider will be of variable height, not to mention responsive so a pixel value wouldn't work.

Answer 1

In short I believe this is the answer:

$(document).foundation();

$('.reveal-modal').on('opened', function(){
    $(window).trigger('resize');
});

OR

$(document).foundation();

$(document).on('opened', '[data-reveal]', function () {
    $(window).trigger('resize');
});

I looked at the following references:

• Foundation 4.1.2: Orbit slider not shown in Reveal window
  • The one you listed as "hacky fixes" above
• Squashed picture when using Orbit in a Reveal
• Orbit height not set on accordion.

It looks like the old hack for 4.1.2 just called the compute_dimension method to resize the modal once it was opened. I looked in the foundation.orbit.js file and found $(window).on('resize', self.compute_dimensions);, around line 280.

Instead of $(window).trigger('resize.fndtn.orbit'); I used $(window).trigger('resize'); and removed the line $(this).find('[data-orbit]').css('height','');.

I forked your jsfiddle and added the changes here.

I hope that helps.

Answer 2

For anyone using Foundation 6 (my legacy project was on 6.2.4), i fixed this by adding the following css code:

div.gallery-in-modal .orbit-container {
    height: auto !important;
}
div.gallery-in-modal .orbit-container .orbit-slide {
    max-height: initial !important;
}