Menu icon Foundation
Orbital Height Issues

<div class="row">

    <ul class="example-orbit" data-orbit>
	  
	  <li>

	  	<div class="large-6 columns right">

				<img src="http://placehold.it/554x277" />

			</div>

			<div class="large-6 columns right">

		    <h1>Text Here</h1>
				<p>More text here.</p>
				<a href="http://www.google.com/" class="more">
					<i class="fa fa-chevron-right"></i> Find out more
				</a>

			</div>

	  </li>
	  <li>

	  	<div class="large-6 columns right">

				<img src="http://placehold.it/554x277" />

			</div>

			<div class="large-6 columns right">

		    <h1>Text Here</h1>
				<p>More text here.</p>
				<a href="http://www.google.com/" class="more">
					<i class="fa fa-chevron-right"></i> Find out more
				</a>

			</div>

	  </li>
	  <li>

	  	<div class="large-6 columns right">

				<img src="http://placehold.it/554x277" />

			</div>

			<div class="large-6 columns right">

		    <h1>Text Here</h1>
				<p>More text here.</p>
				<a href="http://www.google.com/" class="more">
					<i class="fa fa-chevron-right"></i> Find out more
				</a>

			</div>

	  </li>
	  
	</ul>

</div>

<script>
  jQuery(document).foundation({
	  orbit: {
	    animation: 'slide',
	    timer_speed: 1000,
	    pause_on_hover: true,
	    animation_speed: 500,
	    navigation_arrows: true,
	    bullets: true,
	    slide_number: false
	  }
	});
</script>
            

         

For some reason, orbital doesn't seem to adjust to the right height when I load my page. It either has a height of 0px, or just enough height to match the height of the bullets (when I enable them).

As soon as I resize my browser (or open dev tools), it snaps back to the correct height of the container.

Some people have suggested setting a min-height. I cannot do this - my layout is responsive. The height of the section is dynamic and depends on the screen width (also my client could edit the content).

Also worth nothing is that my site is in WordPress.

Any help would be greatly appreciated.

Orbitsliderheight

<div class="row">

    <ul class="example-orbit" data-orbit>
	  
	  <li>

	  	<div class="large-6 columns right">

				<img src="http://placehold.it/554x277" />

			</div>

			<div class="large-6 columns right">

		    <h1>Text Here</h1>
				<p>More text here.</p>
				<a href="http://www.google.com/" class="more">
					<i class="fa fa-chevron-right"></i> Find out more
				</a>

			</div>

	  </li>
	  <li>

	  	<div class="large-6 columns right">

				<img src="http://placehold.it/554x277" />

			</div>

			<div class="large-6 columns right">

		    <h1>Text Here</h1>
				<p>More text here.</p>
				<a href="http://www.google.com/" class="more">
					<i class="fa fa-chevron-right"></i> Find out more
				</a>

			</div>

	  </li>
	  <li>

	  	<div class="large-6 columns right">

				<img src="http://placehold.it/554x277" />

			</div>

			<div class="large-6 columns right">

		    <h1>Text Here</h1>
				<p>More text here.</p>
				<a href="http://www.google.com/" class="more">
					<i class="fa fa-chevron-right"></i> Find out more
				</a>

			</div>

	  </li>
	  
	</ul>

</div>

<script>
  jQuery(document).foundation({
	  orbit: {
	    animation: 'slide',
	    timer_speed: 1000,
	    pause_on_hover: true,
	    animation_speed: 500,
	    navigation_arrows: true,
	    bullets: true,
	    slide_number: false
	  }
	});
</script>
            

         

For some reason, orbital doesn't seem to adjust to the right height when I load my page. It either has a height of 0px, or just enough height to match the height of the bullets (when I enable them).

As soon as I resize my browser (or open dev tools), it snaps back to the correct height of the container.

Some people have suggested setting a min-height. I cannot do this - my layout is responsive. The height of the section is dynamic and depends on the screen width (also my client could edit the content).

Also worth nothing is that my site is in WordPress.

Any help would be greatly appreciated.

Greg Blass over 5 years ago

This is one (hackish) way that I just was able to workaround the issue:

jQuery(document).ready(function($) {
    $(window).trigger('resize');
  });

Not really sure why this is necessary. If anyone can shed some light - that'd be great. For now, this will do the trick for me.

Greg Blass over 5 years ago

Actually, if I refresh the page, for some reason its about half the size. Sigh...

So this is still an issue.

Might have to go with another slider until this issue is addressed.

Rafi Benkual over 5 years ago

Greg, It is not necessary to add any js. The Orbit code you provided does not work most likely because the structure is missing.

Here is the structure of Orbit http://cdpn.io/ujktb

The code you provided is very complex. Can you draw out what you are attempting to accomplish and post that so we can help you make it?

Diggy Dawg over 5 years ago

I ran into the same issue, using WordPress: slider as high as the bullets (or completely invisible), and mysteriously popping up on window resize. Removing the wrap from around the images fixed it, in my case I hyperlinked the images.

Dorian Scheidt over 5 years ago

I'm having the same problem with a pretty complex implementation, also using wordpress.
Each orbit contains a row with multiple columns in it, each column containing an image and some text.

On page load, the slider defaults to one height, cutting off some of the text.
If I resize the window, it pops to full size, displaying everything.

I'd like to avoid the trigger resize hack, but hopefully that'll do for now.

Dorian Scheidt over 5 years ago

(the trigger resize hack, which does not work, sadly.)

Rafi Benkual over 5 years ago

@Diggy Dawg and @Dorian

Not sure if what you're describing is the same thing. Are loading orbit after the page loads?

If so you can use reflow to do this:
$(document).foundation('reflow'); will make foundation check the DOM for any elements and reapply any listeners to them.

To be efficient target the actual type of foundation item you need to 'reflow'

$document.foundation('orbit', 'reflow');

Dorian Scheidt over 5 years ago

I think the issue in my case is that some of the content is being loaded via PHP over the vimeo API, and thus might not be "ready" when the "document" is.

I haven't been able to get the reflow solution to work, and I don't ever see the slider before the content has been loaded into it.

Shawn Jones over 5 years ago

I am having the same issue. Orbit loads about half the time. And like others, the height is 0px when it doesn't work. Also, when it doesn't load, I can resize the window and it will appear. I know I can set the height via css, but would like to get it working without doing that.

My test site is http://parkchapel.fishhookcms.com/.

David Fischetti over 5 years ago

I'm having the exact same issue after upgrade to 5.2. Was working perfectly before. Anyone have any ideas how to fix this?

Porter Bayne over 5 years ago

Bump. I am having this issue as well. Foundation 5.2.0.

Porter Bayne over 5 years ago

By the way, Rafi -- if I try a reflow like so:

$(document).foundation('orbit', 'reflow');

I get this error in Chrome Console:
TypeError: Cannot call method 'compute_dimensions' of undefined

I can use $(document).trigger('resize') to force a resize, but it's so hacky I'd rather use a different slider. This plus the height calculation issue is making Orbit a blocker atm.

Porter Bayne over 5 years ago

Created a ticket for this. Not sure if Foundation team is monitoring this anymore? But it'd be great to get some help.

https://github.com/zurb/foundation/issues/4651

Todd Henry over 5 years ago

I have this problem too since upgrading to 5.2. Had hoped that 5.2.1 would fix it but it didn't.

It's the A HREF that causes it.

<li><img src="#"></li> works.
<li><a href="#"><img src="#"></a></li> bug.

Rafi Benkual over 5 years ago

@Porter
Thanks for opening a GitHub issue for this. We'll take a look at it there. If anyone has a working fix for this please submit a pull request because then it can be added to the codebase.

https://github.com/zurb/foundation/issues/4651

Porter Bayne over 5 years ago

@Todd -- I have the issue but I don't have anchor tags in my slider. But you may be on to something.

So, it's a nested tag containing an image. Perhaps that's related? Maybe Orbit looks for the image in some way like

li > img

??

Joe Workman over 5 years ago

My pull request to fix this just got merged into the master branch! Should be all fixed now... https://github.com/zurb/foundation/pull/4795

Evan Leopold over 5 years ago

That update did not fix the problem. At least it did not fix the problem when the Orbit slider used together with Interchange to serve up increasingly larger images. To deal with this I trigger a resize in Orbit's ready call after my loading animation is removed. Would be nice if Orbit and Interchange played nice together without having to swap out entire blocks of HTML content. Tried using 'reflow' as Rafi has suggested in multiple posts, but it throws this error "Uncaught TypeError: Cannot call method 'compute_dimensions' of undefined" on line 511 of foundation.orbit.js. Oh well.

Gareth Phillips over 5 years ago

I had the exact same problem but I found what was happening is that the following script

Was being loaded before another piece of script that was pulling in the content dynamically.

To fix all I did was move it to the lowest part of the footer possible for everything to still work.

Now it's spot on and works like a dream
```HTML

<script>
    $(document).foundation();
  </script>

Josef Ulander over 5 years ago

@Evan Leopold Could you please provide code examples? I'm struggling with getting it to work.