Menu icon Foundation
F5 Orbit Bullets Invisible in iOS

For some reason I have Orbit bullets that aren't showing at all on iOS but they appear in the browser and are in the markup that Orbit produces. Any ideas for troubleshooting? I tried display:block or and setting the height on .orbit-bullets-container but to no avail. Thanks in advance for any ideas.

OrbitFoundation 5

For some reason I have Orbit bullets that aren't showing at all on iOS but they appear in the browser and are in the markup that Orbit produces. Any ideas for troubleshooting? I tried display:block or and setting the height on .orbit-bullets-container but to no avail. Thanks in advance for any ideas.

This post has been closed. No new replies can be added.

Brian Larson almost 6 years ago

Anyone think that using CSS background images for bullets may do the trick. I thought it was maybe a user agent thing but that didn't seem to be the case.

Errr... just noticed that this not anything buggy. They're hidden on iOS in the Orbit example as well. Any ideas on how to force 'em to show. It's weird that it's not based in media queries but specific to device (eg sized down desktop browser window vs. iPhone).

Brian Larson almost 6 years ago

Finally found the solution. No idea why I didn't look here in the first place. The hiding happens in bower_components/foundation/scss/foundation/components/_orbit.scss file with the code snippet below. I made the customization by overriding this in my _custom.scss file. Could of course be done with regular CSS as well by ditching the SASS nesting. Bummer this isn't in _settings.scss. Hope this helps someone else out there!

.touch {
      .orbit-container {
        .orbit-prev,
        .orbit-next { display: none; }
      }

      .orbit-bullets { display: none; }
    }