Top bar dropdowns not working with Rails 4.1 and Zurb Foundation 5

I'm having a lot of difficulty with this, I've been looking around everywhere and while many people seem to have a similar problem, none of the fixes have worked. I've disabled turbolinks, and I have no other javascript or css styles running.

I'm using Rails 4.1, Ruby 2.0.0 and foundation-rails 5.4.3.

the css styling itself seems to work okay, buttons show up as buttons, and the topbar layout and look is as expected, but dropdown menus do not work. I've been messing with this for so long that I eventually just created a brand new, completely empty test app with basic scaffolding to test it and still dropdowns still will not work.

I've tried a few things including moving $(function(){ $(document).foundation(); }); in the application.js file into a tag in application.html, moving the javascript tags around to several locations in application.html, and several variations of the classes in the menu

and tags.

Symptoms:

Testing on Chrome:

Dropdowns are completely unresponsive, when screen is scaled down, menu button doesn't work at all.

Testing on Firefox/IE:

Dropdowns will actually drop down if they are clicked, but not on hover. Nested dropdowns still not working, and when I click on anything inside the dropdown it dissapears. When the screen is scaled down the menu button does not work at all.

here is what I've done:

rails new foundationtest
rails g scaffold item name:text description:text --skip-stylesheets
rake db:migrate

I then added foundation-rails to, and removed turbolinks from, my gemfile and ran:

bundle
rails g foundation:install

I accepted all the defaults, then went into the application.js file and removed "//= require turbolinks" from it.

as it stands now, this is what I have.

application.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>

    <%= stylesheet_link_tag    "application" %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= csrf_meta_tags %>
  </head>

  <body>
    <nav class="top-bar">
      <ul class="title-area">
        <!-- Title Area -->
        <li class="name">
          <h1><a href="#">Top Bar Title </a></h1>
        </li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>

      <section class="top-bar-section">
        <!-- Left Nav Section -->
        <ul class="left">
          <li class="divider"></li>
          <li class="active"><a href="#">Main Item 1</a></li>
          <li class="divider"></li>
          <li><a href="#">Main Item 2</a></li>
          <li class="divider"></li>
          <li class="has-dropdown"><a href="#">Main Item 3</a>

            <ul class="dropdown">
              <li class="has-dropdown"><a href="#">Dropdown Level 1a</a>

                <ul class="dropdown">
                  <li><label>Dropdown Level 2 Label</label></li>
                  <li><a href="#">Dropdown Level 2a</a></li>
                  <li><a href="#">Dropdown Level 2b</a></li>
                  <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>

                    <ul class="dropdown">
                      <li><label>Dropdown Level 3 Label</label></li>
                      <li><a href="#">Dropdown Level 3a</a></li>
                      <li><a href="#">Dropdown Level 3b</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Dropdown Level 3c</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Dropdown Level 2d</a></li>
                  <li><a href="#">Dropdown Level 2e</a></li>
                  <li><a href="#">Dropdown Level 2f</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown Level 1b</a></li>
              <li><a href="#">Dropdown Level 1c</a></li>
              <li class="divider"></li>
              <li><a href="#">Dropdown Level 1d</a></li>
              <li><a href="#">Dropdown Level 1e</a></li>
              <li><a href="#">Dropdown Level 1f</a></li>
              <li class="divider"></li>
              <li><a href="#">See all &rarr;</a></li>
            </ul>
          </li>
          <li class="divider"></li>
        </ul>

        <!-- Right Nav Section -->
        <ul class="right">
          <li class="divider hide-for-small"></li>
          <li class="has-dropdown"><a href="#">Main Item 4</a>

            <ul class="dropdown">
              <li><label>Dropdown Level 1 Label</label></li>
              <li class="has-dropdown"><a href="#" class="">Dropdown Level 1a</a>

                <ul class="dropdown">
                  <li><a href="#">Dropdown Level 2a</a></li>
                  <li><a href="#">Dropdown Level 2b</a></li>
                  <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>

                    <ul class="dropdown">
                      <li><a href="#">Dropdown Level 3a</a></li>
                      <li><a href="#">Dropdown Level 3b</a></li>
                      <li><a href="#">Dropdown Level 3c</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Dropdown Level 2d</a></li>
                  <li><a href="#">Dropdown Level 2e</a></li>
                  <li><a href="#">Dropdown Level 2f</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown Level 1b</a></li>
              <li><a href="#">Dropdown Level 1c</a></li>
              <li class="divider"></li>
              <li><label>Dropdown Level 1 Label</label></li>
              <li><a href="#">Dropdown Level 1d</a></li>
              <li><a href="#">Dropdown Level 1e</a></li>
              <li><a href="#">Dropdown Level 1f</a></li>
              <li class="divider"></li>
              <li><a href="#">See all &rarr;</a></li>
            </ul>
          </li>
          <li class="divider"></li>
          <li class="has-form">
            <form>
              <div class="row collapse">
                <div class="small-8 columns">
                  <input type="text">
                </div>
                <div class="small-4 columns">
                  <a href="#" class="alert button">Search</a>
                </div>
              </div>
            </form>
          </li>
          <li class="divider show-for-small"></li>
          <li class="has-form">
            <a class="button" href="#">Button!</a>
          </li>
        </ul>
      </section>
    </nav>
    <%= yield %>
    <%= javascript_include_tag "application" %>
  </body>
</html>

application.js:

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .

$(function(){ $(document).foundation(); });

Upvotes: 4

Top bar dropdowns not working with Rails 4.1 and Zurb Foundation 5

Answers (4)

Related Questions