CODEWITHSUNDEEP
jqueryhtmlcssruby-on-railszurb-foundation
damir
damir

Reputation: 2028

Ruby on Rails and Zurb Foundation Offcanvas not working correctly

i just moved my ui (Rails 4) from Bootstrap to Foundation 5. I added a normal Nav for large screens and a Offcanvas Navigation for small screens. see here for more details: http://foundation.zurb.com/docs/components/offcanvas.html

When i click on the Menu the offcanvas navigation shows all links then i can click to content, open the navigation again, BUT, when i click on a link in the navigation, then, i am not able to open the offcanvas navigation, it looks like it is blocked, i have to refresh manually my view in the browser.

here is my code for that: 

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%= content_for?(:title) ? yield(:title) : t('.siteTitle') %></title>

  <%= stylesheet_link_tag    'application'%>
  <%= javascript_include_tag 'vendor/modernizr' %>
  <%= csrf_meta_tags %>
</head>
<body>
    <!-- NAVIGATION Top Bar -->
    <!------------------------>
    <div class="off-canvas-wrap">
        <div class="inner-wrap">
            <div class="contain-to-grid sticky fixed">
                <nav class="top-bar hide-for-small" data-topbar data-options="is_hover: false">
                  <ul class="title-area">
                    <li class="name">
                      <h1><%= link_to t('.siteTitle'), root_path, :id => 'newolu' %></h1>
                    </li>
                  </ul>
                  <section class="top-bar-section">
                    <!-- Right Nav Section -->
                    <ul class="right">
                      <li class="has-dropdown active">
                        <a href="#"><%=t('.menus')%></a>
                        <ul class="dropdown">
                          <li><%= link_to t('.restaurants'), restaurants_path, :id => 'restaurant' %></li>
                        </ul>
                      </li>
                      <li class="has-dropdown">
                        <a href="#"><%=t('.changelanguage')%></a>
                        <ul class="dropdown">
                          <li><%= link_to t('.english'), { :locale => 'en' }, :id => 'en' %></li>
                          <li><%= link_to t('.german'), { :locale => 'de' }, :id => 'de' %></li>
                        </ul>
                      </li>
                    </ul>

                    <!-- Left Nav Section -->
                    <ul class="left">
                      <li class="has-form">
                      </li>
                    </ul>
                  </section>
                </nav>
            </div>

            <!-- NAVIGATION Offcanvas -->
            <!-------------------------->
          <div class="fixed show-for-small">
            <nav class="tab-bar">

              <section class="left tab-bar-section">
                <h1 class="title"><%= t('.siteTitle') %></h1>
              </section>

              <section class="right-small">
                <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
              </section>

            </nav>
          </div>

            <aside class="right-off-canvas-menu">
              <ul class="off-canvas-list">
                <li><label class="first">Newolu</label></li>
                <li><<%= link_to 'Home', root_path, :id => 'newolu' %></li>
              </ul>

              <hr>

              <ul class="off-canvas-list">
                <li><label><%=t('.menus')%></label></li>
                <li><%= link_to t('.restaurants'), restaurants_path, :id => 'restaurant' %></li>
              </ul>

              <hr>

              <ul class="off-canvas-list">
                <li><label><%=t('.changelanguage')%></label></li>
                <li><%= link_to t('.english'), { :locale => 'en' }, :id => 'en' %></li>
                <li><%= link_to t('.german'), { :locale => 'de' }, :id => 'de' %></li>
              </ul>
            </aside>

            <!-- Content -->
            <!------------->
            <section class="main-section">
              <!-- Notice -->
              <!------------>
              <% if notice %>
                  <div data-alert class="alert-box info radius">
                    <p id="notice"><%= notice %></p>
                    <a href="#" class="close">&times;</a>
                  </div>
              <% end %>
              <!-- content goes here -->
              <%= yield %>
            </section>

            <a class="exit-off-canvas" href="#"></a>
        </div>
    </div>
    <%= javascript_include_tag 'application' %>
</body>

does anyone know why this problem occurs? my second problem is, that the text in the following code snippet is not aligned left, it is in the center. When i change it to right or middle, it is plus minus at the same position.

<section class="left tab-bar-section">
            <h1 class="title"><%= t('.siteTitle') %></h1>
          </section>

here is an image:

image

hope somebody can help.. Thank you very much

Upvotes: 2

Views: 1781

Answers (3)

mstewart
mstewart

Reputation: 66

I ran into this issue with the turbolinks gem and found this solution for rails 4.2.0 and foundation 5.5.1.

In your gemfile: gem 'jquery-turbolinks'

On the command line: bundle install

restart your server, then in your application.js: //= require jquery //= require jquery.turbolinks //= require jquery_ujs //= require foundation //= require_tree . $(function(){ $(document).foundation()}); //= require turbolinks

This fixed all the issues with the foundation javascripts not loading by making sure turbolinks runs last using the jquery-turbolinks gem.

Upvotes: 0

Edward Verenich
Edward Verenich

Reputation: 170

Add data-no-turbolink flag to the tag containing you link and it will disable turbolinks for that link triggering a full reload. I just tested it on on ios. No need to disable the whole turbolinks gem.<div data-no-turbolink><a href="/link"></a></div> this should do it.

Upvotes: 6

Pedro Lopes
Pedro Lopes

Reputation: 165

The problem has to do with the turbolinks gem, which is enabled by default in new Rails projects. With this gem, the entire page isn't loaded, only some content (intelligently identified by Rails). Check the Railscast.

To fix this will cause the application to be slower, and you will now see the full page refresh on every link you click. Nevertheless, just remove (or comment until there's a fix) the turbolinks import from your base application.js.

From this: //= require turbolinks

To this: // require turbolinks

Upvotes: 5

Related Questions