Menu icon Foundation
Orbit Slider inside Reveal Modal has no Height

Here is a jsfiddle demonstrating the following issue: http://jsfiddle.net/gU2XH/

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 (from https://github.com/zurb/foundation/issues/2208):

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

         

However this fix no longer works in Foundation 5. 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.

revealreveal-modalorbit sliderinsideheight

Here is a jsfiddle demonstrating the following issue: http://jsfiddle.net/gU2XH/

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 (from https://github.com/zurb/foundation/issues/2208):

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

         

However this fix no longer works in Foundation 5. 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.

Adam Huffman almost 6 years ago

I believe this will work:

$(document).foundation();

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

http://stackoverflow.com/questions/21490016/foundation-5-orbit-slider-inside-reveal-modal-has-no-height/21564725#21564725

Jay Thatcher over 5 years ago

Showing my ignorance here, but it took me awhile to figure out that the placement of this code goes just before the close of the tag. Hope this helps other newbies. I did get it to work. Thanks Adam.

Jones over 5 years ago

Unfortunately I experience the same problem, but not in a reveal mode thingy.
I just want to have it normally displayed on my page.
I tried your code above and also the one from the given link, but it does not work properly....
Any ideas what to do?


Edit: I had still one image from the example from the docs, which therefore could not be loaded.
I fixed the html and now the height seems to be fixed. on the other hand I don't have a working slide show O.o...
Holy !!

powellian over 2 years ago

For this problem in Fdn 6.x I just worked the following.

In your containing element add a new class (shown BEM style here):

<ul class="orbit-container orbit--modal">

In your css/scss/whatever do the following:

.orbit--modal {
	height: auto !important;
}

It's a hack and I hate to use '!important' but it works (tested thus far in Chrome, FF, Safari, IE>=10 (not using below 10)).

I couldn't get any of the JS hacks to work in v6.x

max andreychenko about 1 year ago

Thank You powellian!

powellian about 1 year ago

A pleasure max andreychenko