Menu icon Foundation
Block-grid within Orbit slider

When I nest an Orbit slider within a block grid like so:

<div>
    <ul data-orbit>
        <li>
            <ul class="small-block-grid-3">
                <li> <!-- Content here --> </li>
                .
                .
                .
            </ul>
        </li>
    </ul>
</div>   

They both collapse to the height of the Orbit nav arrows, unless I specify a pixel height for both the containing DIV and the Orbit UL.

This is my first RWD site, so I'd like to avoid specifying exact pixel dimensions wherever possible (best practice, no?). Thanks very much.

block gridOrbitslider

When I nest an Orbit slider within a block grid like so:

<div>
    <ul data-orbit>
        <li>
            <ul class="small-block-grid-3">
                <li> <!-- Content here --> </li>
                .
                .
                .
            </ul>
        </li>
    </ul>
</div>   

They both collapse to the height of the Orbit nav arrows, unless I specify a pixel height for both the containing DIV and the Orbit UL.

This is my first RWD site, so I'd like to avoid specifying exact pixel dimensions wherever possible (best practice, no?). Thanks very much.

Wing-Hou Chan almost 6 years ago

Hi Tomas!

I'm assuming there is content within your <li>(s). If there isn't then that is why is it collapsed.

If there is content then it shouldn't collapse.

Tomas Gray almost 6 years ago

There is content. The slider is on a page which is loaded dynamically via AJAX. I think it might have something to do with the way Orbit computes the height, based on what I have read in other forums, but I can't seem to figure out how to trigger it to recalc the height once the page has been loaded.

Shelli Langdale almost 6 years ago

I'm having the same problem when nesting the Orbit content slider in a grid. Specifying a pixel height on the Orbit ul resolves it.

edit: note about pixel height as temporary solution

Dimitri KOPRIWA almost 6 years ago

I am facing the same issue.

        <div id="gallery_viewer" class="orbit-container">
            <ul data-orbit>
                <li>
                    <ul class="small-block-grid-3">
                        <li><img src="<?= base_url("uploaded/space.jpg") ?>"/></li>
                        <li><img src="<?= base_url("uploaded/satelite.jpg") ?>"/></li>
                        <li><img src="<?= base_url("uploaded/spacewalk.jpg") ?>"/></li>
                    </ul>
                </li>
                <li>
                    <ul class="small-block-grid-3">
                        <li><img src="<?= base_url("uploaded/space.jpg") ?>"/></li>
                        <li><img src="<?= base_url("uploaded/satelite.jpg") ?>"/></li>
                        <li><img src="<?= base_url("uploaded/spacewalk.jpg") ?>"/></li>
                    </ul>
                </li>
            </ul>
        </div>

I've also nested orbit into a reveal modal, content is loaded through ajax

it is the first time I try foundation and I have to admit, it's a lot buggy for a v5, I had to go so many times into foundation.js to fix the code, also last update through grunt did a mess on some pages !

Edit: I finally found something, you can render your ajax loaded orbit slide with

 Foundation.libs.orbit.init()

In my case, the content was loaded through ajax when modal was opening, I was able to recalculate my height

   this.initOrbit = function(){
    var self = this;
    Foundation.libs.orbit.init(); // intiialize after query
    if( UMfirstLoad ){ // global scope var to bind this event once (if modal get toggled)
      UMfirstLoad = false;
      $(document).on( 'opened', function(){
        self.resizeOrbit();
      });
    }
  };

  this.resizeOrbit = function(){
    var imgHeight = $( '[data-orbit]' ).find( 'img[data-gallery]' ).outerHeight();
    $( '[data-orbit]' ).animate( { // since the modal dropdown, hard resize was uggly, but still this is not a valuable solution
      height: imgHeight * this.gallery.img_y + "px" 
    });
  };