4

I'm using Foundation 4.3.0 for a project, and am trying to set up Orbit in the most basic way. The javascript and CSS seem to be loading correctly, the images are loading, all the extra elements are inserted, etc. But the main <ul> always has a height of 0px. Here's my HTML:

<div class="row">
    <section class="large-12 columns">
        <div class="slideshow-wrapper">
            <div class="preloader"></div>
            <ul data-orbit="">
                <li><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
                <li><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
            </ul>
        </div>
    </section>
</div>

Here's the HTML once foundation.orbit.js does its thing:

<div class="row">
    <section class="large-12 columns">
        <div class="slideshow-wrapper">
            <div class="preloader"></div>
            <div class="orbit-container orbit-stack-on-small">
                <ul data-orbit="" class="orbit-slides-container" style="margin-left: -100%; width: 400%; height: 0px;">
                    <li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
                    <li class="active" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
                    <li style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
                    <li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
                </ul>

                <a href="#" class="orbit-prev">Prev <span></span></a>
                <a href="#" class="orbit-next">Next <span></span></a>

                <div class="orbit-slide-number">
                    <span>1</span> of <span>2</span>
                </div>

                <div class="orbit-timer">
                    <span></span>
                    <div class="orbit-progress" style="overflow: hidden; width: 54.15%;"></div>
                </div>
            </div>

            <ol class="orbit-bullets">
                <li data-orbit-slide-number="1" class="active"></li>
                <li data-orbit-slide-number="2" class=""></li>
            </ol>
        </div>
    </section>
</div>

I have tried to put explicit width + height on the images, put class="active" on one slide when generating the HTML, change various Foundation settings, etc, and nothing seems to work.

When I compare the HTML to the live example in the Foundation docs, I notice that in the working version, a z-index is always set dynamically on the slides. On my site, no z-index is ever set. And of course, the ul in the working version has an inline CSS height which equals the height of the slides.

If I manually set the ul height to 300px, everything looks right, except I see no images. If I set div.orbit-container to overflow: visible, I will see the edge of one of the slides to the left of the container.

Any ideas would be much appreciated.

bjudson
  • 3,947
  • 3
  • 27
  • 46
  • I'm having the exact same issue...down to the the height not getting set. Here is my example: http://www.universitycreditunion.org.php53-7.dfw1-1.websitetestlink.com/ – Brett Aug 07 '13 at 16:41
  • Created an issue here: https://github.com/zurb/foundation/issues/2982 – bjudson Aug 08 '13 at 18:39
  • I've downloaded the latest versions of everything and it seems to not work when I use the individual .js includes vs. the minified version that contains them all. – Brett Aug 12 '13 at 17:11

4 Answers4

12

I'm going to try to avoid being overly verbose here.. but this is what I've found and while I wouldn't call this a complete fix, because i'm not sure what started the differences in css the following code solved the problem.

I found this because I have a local environment as well as a dev environment for the site. The local environment was working great, but the production environment had all the issues you mentioned above.

The first issue of course is the generated container div setting the height to 0px. This is strange enough. I manually added the height to the container in the css. The reason all the images are hiding is they're set to margin-left: 100% or some large left margin and they're all positioned absolutely. I wish I could be more help as to why the code differences are present, maybe I'll find more time to investigate further but for now its working.

Anyway, the following was the fix:

.orbit-container { height:250px; }  

.orbit-container .orbit-slides-container > * {
  position: relative;
  margin-left: 0;
  float: left;
  height: 100%;
}
Jeff Richardson
  • 146
  • 1
  • 4
  • Thanks. This is a bit of a hack, but it works for me as well. I'm going to create an issue on GitHub and see what they say. – bjudson Aug 08 '13 at 18:26
  • Just fell victim to this issue myself, no idea what CSS changes caused this to stop working (lost hours git diffing without luck), but this seems to fix it. Thanks! – Matt Richards Sep 19 '13 at 17:20
  • @bjudson Did you hear anything back on the Github issue? – gijswijs Oct 21 '13 at 14:44
  • The GitHub issue is linked above in a comment on the question itself. No resolution yet, but several good comments & alternative solutions. – bjudson Oct 28 '13 at 16:33
1
.orbit-container { height:auto; }  

.orbit-container .orbit-slides-container > * {
  position: relative;
  margin-left: 0;
  float: left;
  height: 100%;
}

A little upgrade from a previous solution. With this modification, it will be more easy to show the slideshow on a phone and a desktop.

Martin Ayotte Cummings
  • 11
  • 3
0

Are you sure the url to the images are ok? I had the same problem but with 2 of my 3 images and the problem was in the url

Bernardao
  • 392
  • 3
  • 19
  • The URLs are fine. They are actually generated by `sorl-thumbnail`. But when I was double-checking I noticed something I've never seen before. When looking at metrics of one of the images in Chrome, it shows as NaN x NaN. But the natural size of both image files is 1110 x 300. I tried manually resaving the image, but that didn't help. – bjudson Aug 05 '13 at 23:36
0

I was having the same problem and I've just found that using individual modules (I'm using compass) instead of using foundation.min.css solves the problem, have you tried to use foundation.css (not minyfied)?

túú
  • 3
  • 1
  • 2